指令目录：

1.v-show
2.v-if
3.v-model
4.v-on
5.v-for
6.v-bind
7.v-text
8.v-cloak

---------------------------------------

9.自定义指令 表单自动获取焦点

-----------------------------------------

一、v-cloak

作用 ：防止页面数据加载速度慢时，页面闪出花括号 {{}}，直到数据加载完成才会显示出DOM节点
语法 ： HTML中 <div v-cloak>{{表达式}}</div> style 中 [v-cloak] {display:none}
注意 ：在用到花括号时候才会使用

二、v-text

作用：更新元素的文本内容textContent
语法：v-text=‘msg’ 类似于innerHTML,会将子节点内容全部更新，但是不会解析HTML标签
注意：与双大括号功能类似

三、对比 v-show 与 v-if

语法 ：v-show = 表达式结果的布尔值
true ：显示元素
false ：隐藏元素
控制的元素display属性
语法 : v-if = 表达式结果的布尔值
true ：显示元素
false ：移除元素
控制元素的visibility属性

四、v-for

作用 ：遍历data中某个变量的数据，并在页面进行数据展示
语法 ：v-for = "(item,index) in arr"
item ：表示每次遍历得到的元素
index ：表示item的索引，从来0开始（可选参数）
arr ：需要遍历的data数据中的数组

五、v-bind

作用 ：绑定HTML元素的属性
语法 ： v-bind ：属性名 = "表达式"
绑定一个属性：<img v-bind:src='myUrl' />
绑定多个属性 ：<img v-bind="{src:myUrl,title:msg}" />
如果绑定的属性是需要控制的：
绑定class ：v-bind:class="{类名:表达式}"
<button v-bind:class="{red:true}"></button>

六、 v-model 双向绑定

作用：将用户的输入同步到视图上
语法 ：v-model = 变量
注意 ：v-model指令必须绑定在表单元素上

七、v-on 事件绑定

作用：
语法：
注意：

八、自定义指令

作用：
语法：
注意：