Vue 2 提供了丰富的指令，用于实现各种功能，例如数据绑定、条件渲染、事件处理、DOM 操作等。指令以 v- 前缀开头，并遵循特定的语法规则。
指令分类
Vue 2 指令可以分为以下几类：
数据绑定指令：用于将数据绑定到 DOM 元素，包括 v-model、v-text、v-html 等指令。
条件渲染指令：用于根据条件渲染 DOM 元素，包括 v-if、v-else-if、v-else 等指令。
事件处理指令：用于响应 DOM 事件，包括 v-on、v-click、v-keydown 等指令。
属性指令：用于设置 DOM 元素的属性，包括 v-bind、v-class、v-style 等指令。
其他指令：包括 v-for、v-pre、v-once 等指令。
指令语法
Vue 2 指令的基本语法如下：
HTML
其中：
el：要应用指令的 DOM 元素
v-directive：指令名称
expression：指令表达
指令表达可以是简单值、变量、表达式或函数调用。
常用指令示例
以下是一些常用指令的示例：
v-model：用于双向数据绑定，将表单控件的值绑定到数据属性。
HTML
请谨慎使用代码。
content_copy
v-text：用于将文本内容绑定到 DOM 元素。
HTML
v-html：用于将 HTML 内容绑定到 DOM 元素。
HTML
v-if：用于条件渲染 DOM 元素。
HTML
This will be rendered if show is true.
请谨慎使用代码。
content_copy
v-else-if：用于在 v-if 失败时条件渲染 DOM 元素。
HTML
This will be rendered if show1 is true.
This will be rendered if show1 is false and show2 is true.
v-else：用于在所有 v-if 和 v-else-if 条件都失败时渲染 DOM 元素。
HTML
This will be rendered if show1 is true.
This will be rendered if show1 is false and show2 is true.
This will be rendered if both show1 and show2 are false.
v-on：用于响应 DOM 事件。
HTML
Click me
v-bind：用于设置 DOM 元素的属性。
HTML
v-class：用于动态设置 DOM 元素的 CSS 类。
HTML
This div will have the class "active" if isActive is true.
v-style：用于动态设置 DOM 元素的 CSS 样式。
HTML
This div will have the style "color: red" if color is "red".
v-for：用于循环渲染 DOM 元素。
HTML
- {{ item }}
自定义指令
Vue 2 还支持自定义指令，用于实现更复杂的业务逻辑。
自定义指令的定义需要使用 Vue.directive 方法。该方法接受两个参数：
指令名称
指令对象
指令对象包含以下属性：
bind：指令第一次绑定到元素时调用的钩