1.vue是渐进式框架的理解
除了vue的核心，再根据自己需求的功能添加相应的插件
2.vue.js的核心
数据驱动和组件
数据驱动：数据的改变会驱动视图的自动更新，利用Object.defineProperty和存储器属性: getter和setter
3.vue常用的修饰符
.stop阻止事件冒泡
.number限制输入的值为数字
.prevent防止执行预设的行为
.trim限制输入空格
4.v-on可以监听多个方法吗？
可以绑定单个或者多个事件，绑定多个，按执行顺序执行，中间用逗号隔开
<button @click="a(),b()"></buttton>a事件执行完后，b事件执行，事件的修饰符有：.stop(阻止事件冒泡) .prevent(阻止预设行为).capture(捕获事件)
5.vue中key值的作用
一个唯一的识别身份，可以下标值index或者id,主要是为了vue精准的追踪到每一个元素
6.vue事件中怎样使用event
<div id="app">
<button v-on:click="click">click me</button>
</div>
...
var app = new Vue({
el: '#app',
methods: {
click(event) {
console.log(typeof event); // object
}
}
});
<div id="app">
<button v-on:click="click($event, 233)">click me</button>
</div>
...
var app = new Vue({
el: '#app',
methods: {
click(event, val) {
console.log(typeof event); // object
}
}
});
使用不带圆括号的形式，event 对象将被自动当做实参传入；
使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象。
7.$nextTick
下一次DOM更新循环结束后执行的回调函数，在修改之后使用$nextTick则可以在回调中获取更新后的DOM
场景：视图更新之后需要基于新的视图进行操作
案例：vue中只用原生的swiper时，图片只能显示一张
解决：在watch{this.$nextTick(()=>{new Swiper})}
8.vue组件中的data为什么是函数
如果data不是函数，是一个对象那么改变其中的一个时，其他的也会随之改变，这是由于js本身的特性导致的，对象是引用数据类型，改变其中一个，其他也会随之改变。如归是一个函数，那么每个data的实例属性就是独立的，不会被影响
9.v-for和v-if的优先级
v-for的高，v-if 将分别重复运行于每个 v-for循环中所以，不推荐v-if和v-for同时使用
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
或者
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
10.vue计算属性和方法的区别
方法：只有在调用的时候才会执行对应的方法，不会自动同步数据。（调用的时候才会执行）
计算属性：里的方法在初始化执行过后，只要任何值有更新，那么所有在computed计算属性里和其相关的值都会更新。（变化的时候才会执行）
11.watch和计算属性的区别
watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据【一个影响多个】）每次都要实行函数
computed适合处理的场景是，获得一个值或者结果，该结果受其他的依赖的影响。（一个数据受多个数据影响【多个影响一个】）当数据变化的时候才计算，不变的时候读取内存
12.vue路由的实现
hash和history两种模式
hash:在浏览器中是‘#’以及‘#’之后的，用window.location.hash读取
history:采用html5新增的特性，提供了两种方法：pushState(),replaceState()
13.vue-router怎样获取传过来的值
在router目录下的index.js中，对path添加上/:id，使用的时候用router对象的params.id
14.vue中data什么时候绑定
data在创建完成的时候就已经存在了
15.vue中绑定class的两种形式
绑定的方式是数组和对象的形式
数组：<div :class="[activeClass, errorClass]"></div>
对象：<div :class="{'active':isActive}"></div>
data() {
return {
isActive: true
};
}
