Vue面试题，看懂这几个就入门了

MVVM（Model-View-ViewModel)是在MVC(Model-View-Control)模式之后引出的新的开发模式，他与MVC模式一样用于把视图（界面）和数据进行解耦，不同的是采用ViewModel来完成数据与视图的双向绑定，通过自动化的方式承担大部分数据工作，来解决由于界面复杂化和快速迭代带来的问题。

一、选择题

1.有关Vue的说法，错误的是？C
A.是一套构建用户界面的渐进式框架(MVVM)
B.能进行数据的双向绑定
C.Vue 只能够为简单的单页应用程序提供驱动
D.Vue 采用自底向上增量开发的设计

2.MVVM的Model对应的是（B），View 对应的是（A），ViewModel 是View和Model的（C）
A.DOM
B.JavaScript 对象
C.中间件
D.连接器
E.显示

3.不是最符合MVVM的应用场景的是？（多选） A、B、C
A.针对具有简单交互逻辑的前端应用
B.通过 Ajax 数据持久化，不需要重新刷新页面，重新解析 DOM，保持前端的用户体验
C.提供基础的架构抽象
D.提供复杂的架构抽象

4.对于Vue数据的双向绑定正确的是？ C
A.通过改变Model来改变View
B.通过改变View来改变Model
C.Model和View改变任意一个，另一个也改变
D.没有正确的

5.用哪个属性实现数据的双向绑定？ B
A.v-show
B.v-model
C.v-if
D.v-for

6.在es6中用于声明变量的是？（多选） A、B
A.var
B.let
C.$
D.Ver

7.能够用于判断效果的是？C
A.v-for
B.v-show
C.v-if
D.v-model

8.能够用于循环效果的是？A
A.v-for
B.v-show
C.v-if
D.v-model

9.能实现属性绑定的是？（多选） A、B
A.<img v-bind:src="imageSrc">
B.<img :src="imageSrc">
C.<img $src="imageSrc">
D.<img @src="imageSrc">

10.能实现事件绑定的是？（多选）A、B
A.<button v-on:click="doThis"></button>
B.<button @click="doThis"></button>
C.<button v-bind:click="doThis"></button>
D.<button :click="doThis"></button>

二、论述题

1.解释v-text和v-html的区别
v-text和{{}}表达式渲染数据，不解析标签。
v-html不仅可以渲染数据，而且可以解析标签。

v-text展示效果： <strong>Hello</strong> Vue!
v-html展示效果： Hello Vue!

2.es6中有哪几种声明变量的方法？写出来并比较它们之间的区别
变量声明的三个关键字var let const。
var
1、允许重复的变量声明，数据被覆盖
2.变量提升，闭包
3.全局变量挂载到全局对象，污染全局变量

let
块级作用域：代码执行时遇到花括号，会创建一个块级作用域，花括号结束，块级作用域销毁。
1.不允许在当前作用域内重复声明let
2.let声明的变量不会提升
3.let声明的变量不会被挂载到全局对象中

const
const和let几乎完全相同，唯一的区别就是用const声明的常量，必须在声明时赋值，并且不可以重新赋值。不可以重新赋值指的是常量的内存空间不能变，但是不保证内存空间中的地址指向的其他空间不变。

三、编程题

1.用vue写一个简单的数据双向绑定

<div id="app">
       <input type="text" v-model="text">
       {{ text }}
</div>  

<script>
	 var vm = new Vue({
	     el: '#app', 
	     data: {
	         text: 'hello world'
	     }
	 });
</script>

2.用vue写一个简单的数据遍历

<ul>
  <li 
    v-for='product in products'
    :key='product._id'  
  >
    {{ product.name }}
  </li>
</ul>

3.写一下全局组件和局部组件？

<section id="global">
        <h4>全局组件</h4>
        <my-global></my-global>
</section>

<div id="com2">
    <my-global></my-global>
</div>

Vue.component('my-global', {
    template: '<div>!{{msg}}</div>',
    data(){//data 必须是函数
        return {msg: "A global component"};
    }
});

//创建根示例
new Vue({
  el: '#global'
});
//创建第二个实例

const vm2 = new Vue({
    el:"#com2"
});

const child = {
    template: '<div>A local component!</div>'
};
const vm = new Vue({
    el:"#local",
    data:{
    },
    components:{//局部组件
        "my-local":child
    }
});

总结：全局组件可以每个实例都可以使用，而局部组件只能在某个作用域【某实例】下可用。