指令名称 | 指令作用 | 示例 | 简写形式 |
| v-text | 设置元素的innerText | v-text="111" | 无 |
| v-html | 设置元素的innerHTML | v-html="<p>111</p>" | 无 |
| v-on | 给元素绑定事件 | v-on:click="doClick" | @click="doClick" |
| v-bind | 设置元素的原生属性 | v-bind:src="./logo.png" | :src="./logo.png" |
| v-for | 列表渲染 | <li v-for=(item,index) in list></li> | 无 |
1.Vue指令的`本质是` ： Vue为HTML标签新增的一些`属性`,
a. 每一个HTML标签都有自己的原生默认属性
（1）HTML标签的每一个属性都有自己独特的功能
（2）例如 img标签的src属性，a标签的href属性
b. Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能
2.在Vue中每一个指令都是以`v-`开头 （用于区分HTML标签原生属性）
语法 ： `指令名=“指令值”`，
例如 `v-text = msg`
3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。
<img src="./images/logo.png" alt="图片不存在时的文本" title="鼠标悬停文本" v-on:click = "doClick"> |
| src : 原生属性，设置图片的路径 |
| alt : 原生属性 ，设置图片不存在时的文本 |
| title：原生属性，设置鼠标悬停文本 |
| v-on:click:vue给img标签新增的属性, 给元素绑定点击事件 |
版权声明：本文为w_meng_zhao原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。