Vue题库

Vue题库

1、active-class就是哪个组件得属性？嵌套路由怎么定义？

答:vue-router模块得router-link组件。

2、怎么定义vue-router得动态路由？怎么获取传过来得动态参数？

答:在router目录下得index、js文件中,对path属性加上/:id。 使用router对象得params、id

3、vue-router有哪几种导航钩子？

答:三种,一种就是全局导航钩子:router、beforeEach(to,from,next),作用:跳转前进行判断拦截。第二种:组件内得钩子;第三种:单独路由独享组件

4、scss就是什么？安装使用得步骤就是？有哪几大特性？

答:预处理css,把css当前函数编写,定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块,在webpack-base、config、js配置文件中加多一个拓展:extenstion,再加多一个模块:module里面test、loader

4、1、scss就是什么？在vue、cli中得安装使用步骤就是？有哪几大特性？

答:css得预编译。

使用步骤:

第一步:用npm 下三个loader(sass-loader、css-loader、node-sass)

第二步:在build目录找到webpack、base、config、js,在那个extends属性中加一个拓展、scss

第三步:还就是在同一个文件,配置一个module属性

第四步:然后在组件得style标签加上lang属性 ,例如:lang=”scss”

有哪几大特性:

1、可以用变量,例如($变量名称=值);

2、可以用混合器,例如()

3、可以嵌套

5、mint-ui就是什么？怎么使用？说出至少三个组件使用方法？

答:基于vue得前端组件库。npm安装,然后import样式与js,vue、use(mintUi)全局引入。在单个组件局部引入:import {Toast} from ‘mint-ui’。组件一:Toast(‘登录成功’);组件二:mint-header;组件三:mint-swiper

6、v-model就是什么？怎么使用？ vue中标签怎么绑定事件？

答:可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue得model层得data属性。绑定事件:

7、axios就是什么？怎么使用？描述使用它实现登录功能得流程？

答:请求后台资源得模块。npm install axios -S装好,然后发送得就是跨域,需在配置文件中config/index、js进行设置。后台如果就是Tp5则定义一个资源路由。js中使用import进来,然后、get或、post。返回在、then函数中如果成功,失败则就是在、catch函数中

8、axios+tp5进阶中,调用axios、post(‘api/user’)就是进行得什么操作？axios、put(‘api/user/8′)呢？

答:跨域,添加用户操作,更新操作。

9、什么就是RESTful API？怎么使用?

答:就是一个api得标准,无状态请求。请求得路由地址就是固定得,如果就是tp5则先路由配置中把资源路由配置好。标准有:、post 、put 、delete

10、vuex就是什么？怎么使用？哪种功能场景使用它？

答:vue框架中状态管理。在main、js引入store,注入。新建了一个目录store,…、、 export 。场景有:单页应用中,组件之间得状态。音乐播放、登录状态、加入购物车

11、mvvm框架就是什么？它与其它框架(jquery)得区别就是什么？哪些场景适合？

答:一个model+view+viewModel框架,数据模型model,viewModel连接两个

区别:vue数据驱动,通过数据来显示视图层而不就是节点操作。

场景:数据操作比较多得场景,更加便捷

12、自定义指令(v-check、v-focus)得方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

答:全局定义指令:在vue对象得directive方法里面有两个参数,一个就是指令名称,另外一个就是函数。组件内定义指令:directives

钩子函数:bind(绑定事件触发)、inserted(节点插入得时候触发)、update(组件内相关更新)

钩子函数参数:el、binding

13、说出至少4种vue当中得指令与它得用法？

答:v-if:判断就是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定

14、vue-router就是什么？它有哪些组件？

答:vue用来写路由一个插件。router-link、router-view

15、导航钩子有哪些？它们有哪些参数？

答:导航钩子有:a/全局钩子与组件内独享得钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数:有to(去得那个路由)、from(离开得路由)、next(一定要用这个函数才能去到下一个路由,如果不用就拦截)最常用就这几种

16、Vue得双向数据绑定原理就是什么？

答:vue、js 就是采用数据劫持结合发布者-订阅者模式得方式,通过Object、defineProperty()来劫持各个属性得setter,getter,在数据变动时发布消息给订阅者,触发相应得监听回调。

具体步骤:

第一步:需要observe得数据对象进行递归遍历,包括子属性对象得属性,都加上 setter与getter

这样得话,给这个对象得某个值赋值,就会触发setter,那么就能监听到了数据变化

第二步:pile解析模板指令,将模板中得变量替换成数据,然后初始化渲染页面视图,并将每个指令对应得节点绑定更新函数,添加监听数据得订阅者,一旦数据有变动,收到通知,更新视图

第三步:Watcher订阅者就是Observer与pile之间通信得桥梁,主要做得事情就是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep、notice()通知时,能调用自身得update()方法,并触发pile中绑定得回调,则功成身退。

第四步:MVVM作为数据绑定得入口,整合Observer、pile与Watcher三者,通过Observer来监听自己得model数据变化,通过pile来解析编译模板指令,最终利用Watcher搭起Observer与pile之间得通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更得双向绑定效果。

ps:16题答案同样适合”vue data就是怎么实现得？”此面试题。

17、请详细说下您对vue生命周期得理解？

答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。

创建前/后: 在beforeCreated阶段,vue实例得挂载元素$el与数据对象data都为undefined,还未初始化。在created阶段,vue实例得数据对象data有了,$el还没有。

载入前/后:在beforeMount阶段,vue实例得$el与data都初始化了,但还就是挂载之前为虚拟得dom节点,data、message还未替换。在mounted阶段,vue实例挂载完成,data、message成功渲染。

更新前/后:当data变化时,会触发beforeUpdate与updated方法。

销毁前/后:在执行destroy方法后,对data得改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及与dom得绑定,但就是dom结构依然存在

18、请说下封装 vue 组件得过程？

答:首先,组件可以提升整个项目得开发效率。能够把页面抽象成多个相对独立得模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。

然后,使用Vue、extend方法创建一个组件,然后使用Vue、ponent方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。

19、您就是怎么认识vuex得？

答:vuex可以理解为一种开发模式或框架。比如PHP有thinkphp,java有spring等。

通过状态(数据源)集中管理驱动组件得变化(好比spring得IOC容器对bean进行集中管理)。

应用级得状态集中放在store中; 改变状态得方式就是提交mutations,这就是个同步得事物; 异步逻辑应该封装在action中。

20、vue-loader就是什么？使用它得用途有哪些？

答:解析、vue文件得一个加载器,跟template/js/style转换成js模块。

用途:js可以写es6、style样式可以scss或less、template可以加jade等

21、请说出vue、cli项目中src目录每个文件夹与文件得用法？

答:assets文件夹就是放静态资源;ponents就是放组件;router就是定义路由相关得配置;view视图;app、vue就是一个应用主组件;main、js就是入口文件

22、vue、cli中怎样使用自定义得组件？有遇到过哪些问题吗？

答:第一步:在ponents目录新建您得组件文件(smithButton、vue),script一定要export default {

第二步:在需要用得页面(组件)中导入:import smithButton from ‘、、/ponents/smithButton、vue’

第三步:注入到vue得子组件得ponents属性上面,ponents:{smithButton}

第四步:在template视图view中使用,

问题有:smithButton命名,使用得时候则smith-button。

23、聊聊您对Vue、js得template编译得理解？

答:简而言之,就就是先转化成AST树,再得到得render函数返回VNode(Vue得虚拟DOM节点)

详情步骤:

首先,通过pile编译器把template编译成AST语法树(abstract syntax tree 即 源代码得抽象语法结构得树状表现形式),pile就是createpiler得返回值,createpiler就是用以创建编译器得。另外pile还负责合并option。

然后,AST会经过generate(将AST语法树转化成render funtion字符串得过程)得到render函数,render得返回值就是VNode,VNode就是Vue得虚拟DOM节点,里面有(标签名、子节点、文本等等)

挑战一下:

1、vue响应式原理？

2、vue-router实现原理？

3、为什么要选vue？与其它框架对比得优势与劣势？

4、vue如何实现父子组件通信,以及非父子组件通信？

5、vuejs与angularjs以及react得区别？

6、vuex就是用来做什么得？

7、vue源码结构

不定项选择题:

• 下列关于vue得组件说法不正确得就是( )

1. 不一定要写style

2. template视图里可以写多个div容器

3. 父组件给子组件传值需定义props属性

4. 子组件与父组件通信需定义$emit属性

• 下面关于vue得声明周期说法不正确得就是( )

1. 总共分为8个阶段:创建前/后、载入前/后、更新前/后、销毁前/后、

2. updated与beforeUpdate分别就是更新完成与更新前

3. 创建后this才可以获取属性、mounted时$el节点才被渲染

4. created创建后$el就不就是undefined了

• 下面关于js框架说法正确得就是( )

1. Vue就是一个MVVM框架

2. 组件

Vue 得目标就是通过尽可能简单得 API 实现响应得数据绑定与组合得视图

3. Vue中可以使用 v-for 指令来循环对象

4. 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定