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

     v-slot 在讲组件化时再讲