Vue试卷

选择题

1、Vue.js是通过（ c ）思想实现数据绑定的

A. MVP B. MVC C.MVVM D.以上都不是

2、在Vue对象中，可以使用（ B ）属性来编写自定义函数

A: computed    B: methods  C: data    D: created

3、下列关于v-if和v-show的描述中，不正确的是（ B ）

A. v-if和v-show都可以动态控制DOM元素的显示和隐藏

B. v-if不可以动态控制DOM元素的显示和隐藏

C. v-if的显示与隐藏是对DOM元素的整体添加或删除

D. v-show隐藏式为该元素添加CSS---display:none，DOM元素还存在

4、完整的v-on语法<a v-on:click=”doSomething”></a>可以缩写为（  C ）

A. <a οnclick=”doSomething”></a>

B. <a :click=”doSomething”></a>

C. <a @click=”doSomething”></a>

D. <a click=”doSomething”></a>

5、在Vue中，父组件向子组件传递数据时需要使用的特性是（C ）

A. emit B. $emit C. props D. $props

6、下列全局注册组件正确的是（ D ）

A. Vue.methos(‘component-a’,{})

B. Vue.props(‘component-a’,{})

C. Vue.components(‘component-a’,{})

D.Vue.component(‘component-a’,{})

7、Vue-CLI的目录结构中用于存放静态资源的目录是（ A ）

A.Assets B. public C. src D.build

8、以下命令中，可以获取动态路由{path:’/user/:id’}中id的值的是？（ A ）

A.this.$route.params.id

B.this.route.params.id

C.this.$router.params.id

D.this.router.params.id

9、当style标签具有（ C ）属性时，其CSS将仅应用于当前组件的元素上

A.Component B. class C. scoped D. scope

10、在Vue中，可以通过（ C ）特性来绑定动态组件

A.Show B. if C. is D. bind

填空题

1、Vue提供了两个动态监测data的函数，一个是___watch__,另一个是_____computed___

2、全局过滤器注册要接受的两个参数是___过滤器名字____和_____回调函数____

3、MVVM主要包含三个部分，分别是Model、____view_____和____vievmodel______

4、Vue中实现双向数据绑定的指令是____v-model_____

5、Vuex 实例对象中初始数据状态通过 ___state_____ 方式获取

6、在Vue中，路由有两种工作模式，分别是____hash_____模式和_____history____模式

三、简答题（每题5分，共20分）

1、请简述Vue中的MVVM模式

MVVM全称是Model-View-ViewModel

Model代表整个Web项目所需要的数据模型， Model含有大量信息，但它并不具有任何行为逻辑，它只是数据，因而它不会影响浏览器如何展示数据。

View是具有主动性的，因为它包括了一些数据绑定、事件和行为，这些都会直接影响Model和ViewModel的。

ViewModel：MVVM中的VM它主要负责用一定的业务逻辑对数据进行改变或转换，它也负责将Model的变化反应到View上。

1. 简述Vuex的几种状态和属性

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

state：vuex的基本数据，用来存储变量

getters：从基本数据(state)派生的数据，相当于state的计算属性

mutations：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutations 都有一个字符串的事件类型(type) 和 一个 回调函数 (handler)。 回调函数就是我们实际进行状态更改的地方，并且它会接受 state作为第一个参数，提交载荷作为第二个参数。

actions：和mutation的功能大致相同，不同之处在于：

1. Action 提交的是 mutation，而不是直接变更状态。
2. Action 可以包含任意异步操作。

modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

3、请简述Vue的生命周期

1. 创建阶段：在这个阶段，Vue实例被创建，但还没有挂载到DOM上

2. 挂载阶段：在这个阶段，Vue实例将挂载到DOM上。

3. 更新阶段：在这个阶段，Vue实例的数据发生变化，导致视图更新。

4. 销毁阶段：在这个阶段，Vue实例将被销毁。

beforeCreate（初始化界面前）

created（初始化界面后）

beforeMount（渲染DOM前）

mounted（渲染DOM后）

beforeUpdate（更新数据前

updated（更新数据后）

4、简述单页面应用的优点和缺点

单页面的优点：

1. 用户体验好，快，内容的改变不需要重新加载整个页面
2. 前后端分离

3.页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：

1. 不利于seo；
2. 导航不可用，如果一定要导航需要自行实现前进、后退；
3. 初次加载时耗时多；页面复杂度提高很多。

V-if v-for区别：

在使用中，v-for优先级比v-if高

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名。

在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化。