Vue 2.0面试题（1）
1.常用的vue指令有哪些？你怎么理解指令？
指令就是vue内置的一套“模板”（都是以v-*），用于在视图节点上动态绑定变量（表达式）的。指令实际上是DOM功能的抽象，所以指令实际上也是DOM操作。
指令的“值”是表达式，所以大家要理解什么是表达式
1、文本类指令：{{}}文本插值、v-text、v-once、v-cloak、v-html
{{}} 用于绑定节点的文本，它和v-text功能是一样的。区别是{{}}这种绑定值的方式会出现“{{}}一闪而过”的效果，建议使用v-cloak来解决。
v-text 用于绑定节点的文件，在大多数时候，它和 {{}} 可以相互替换。
v-once 用于指定节点的动态内容只绑定一次。当前节点中所对应的变量发生变化，视图不更新。一般情况下，v-once只能和{{}}一起用。
v-once 和 v-cloak 都是不需要接收表达式来做为“值”
v-html 用于绑定动态的html节点，相当于DOM中的 innerHTML。这个指令默认已经做了“防注入攻击XSS”的处理。
2、动态属性指令 v-bind
v-bind 用于动态绑定节点的属性（比如title、value、class、style等）
v-bind 用得非常多，所以经常简写成 : <div :id='变量'></div>
动态class语法（一）：<div :class='`${变量1} ${变量2} `'></div>
动态class语法（二）：<div :class='[表达式1, 表达式2, ...]'></div>
动态class语法（三）：<div :class='{ 类名1: 布尔值1, 类名2: 布尔值2, ... }'></div>
动态style语法（一）：<div :style='`color:red;fontSize:20px`'></div>
动态style语法（二）：<div :style='[{css键值对}, {css键值对}, ...]'></div>
动态style语法（三）：<div :style='{css键值对}'></div>
3、事件绑定 v-on
v-on 用于给视图节点绑定各种JS事件，比如click、mouseenter、blur、keyup等
v-on 用得非常多,所以简写成 @ 基本语法: <div @事件名.事件修饰符='事件处理器'></div>
v-on 上可以使用事件修饰符: .stop阻止冒泡 .prevent阻止默认事件 .enter绑定键盘Enter键盘....
事件对象与事件传参, 放在v-for中讲.
4、表单绑定 v-model
v-model 用于表单取值(表单双向绑定), 比如input/select/textarea等
基本语法: <input type="text" v-model.表单修饰符='变量'/>
三个修饰符: .trim自动去除文本首尾空格 .number隐式类型转换变成Number类型 .lazy用于性能,当表单失焦时再进行双向绑定.
v-model 还有更深的理解, 在组件化中进一步去理解.
5、列表渲染 v-for
v-for 用于渲染列表、对象、Number变量等等.
当 v-for 渲染列表时, 语法是这样的 <div v-for='(item,index) in array'></div>
当 v-for 渲染对象时, 语法是这样的 <div v-for='(value,key,index) in obj'></div>
当 v-for 渲染Number变量时, 语法是这样的 <div v-for='(num, index) in 5'></div>
注意: v-for在循环渲染时要求加key, 为什么呢? 在响应式原理时再解释.
6、条件渲染 v-show / v-if / v-else-if / v-else
v-show 用于显示或隐藏视图节点, 背后使用的 display:block / display:none 来实现的.
v-if / v-else-if / v-else 用于显示或隐藏视图节点, 背后是真正地移除或插入视图节点.
说明: v-if 因为是节点插入或移除, 比较耗费性能; v-show只是通过样式来实现显示与隐藏, 性能开销更小.
说明: v-if, 不建议和 v-for 一起使用; 如果一定要在同一个节点上使用v-if和v-for, v-for优先级更好.
7、其它指令
v-pre 用于调试，可以阻止vue编译器对指令的编译，生产工作中很少使用。
v-slot 在讲组件化时再讲，用于指定具名插槽。
8、自定义指令
在vue开发中，除了可以使用这些内置指令外，我们还可以使用Vue.directive() 或 directives选项来自定义指令。
