指令（Directives）是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
Vue中指令按照不同的用途可分为6大类：
1.内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有3个：v-text 、{{ }} 、v-html
v-text
v-text指令的缺点：会覆盖元素内部原有的内容。
{{ }}
Vue提供的{{ }}语法，专门用来解决v-text会覆盖默认文本内容的问题。这种{{ }}语法的专业名称是插值表达式（英文名：Mustache）
插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容。
v-text 与 {{ }}的效果：
v-html
v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素则需要用到v-html这个指令：
2.属性绑定指令
注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中。
所以，如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。
用法示例：
在vue中，可以使用v-bind:指令，为元素的属性动态绑定值；v-bind:简写是英文式的“:”。
在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算，例如：
在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
3.事件绑定指令
Vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。语法格式如下：
注意：原生DOM对象有onclick、opinput、onkeyup等原生事件，替换为vue的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup
事件对象$event
$event的应用场景：如果默认的事件对象e被覆盖了，则可以手动传递一个$event
事件修饰符
在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此，vue提供了事件修饰符的概念，来辅助程序员更方便地对事件地触发进行控制。常见的5个事件修饰符如下：
| 事件修饰符 |
说明 |
| .prevent |
阻止默认行为（例如：阻止a链接的跳转、阻止表单的提交等） |
| .stop |
阻止事件冒泡 |
| .capture |
以捕获触发当前的事件处理函数 |
| .once |
绑定的事件只触发1次 |
| .self |
只有在event.target是当前元素自身时触发事件处理函数 |
按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：
