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

          动态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、自定义指令

指令本质上就是DOM功能的一种抽象封装。

     什么是自定义指令？当你在项目中有一些常用的DOM功能要复用时，建议封装成指令，这就是自定义指令。

     全局指令：使用 Vue.directive('指令名', fn/{})定义全局指令，在任何组件中都能使用。

     局部指令：使用 directives: {} 定义局部指令，只能在当前组件中使用。