Vue的指令（一）

指令（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是当前元素自身时触发事件处理函数

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：