Vue 2 指令是特殊的 HTML 属性，用于将数据绑定到 DOM 元素或执行其他操作。它们以 v- 前缀开头，后面跟着指令名称。
内置指令
Vue 2 提供了许多内置指令，用于执行常见任务，例如：
v-model： 将数据绑定到输入元素的值
v-text： 将数据绑定到元素的文本内容
v-html： 将数据绑定到元素的 HTML 内容
v-if： 根据条件显示或隐藏元素
v-for： 循环遍历数组并渲染元素
v-on： 在元素上添加事件侦听器
v-bind： 动态绑定元素属性
v-class： 动态添加或删除 CSS 类
自定义指令
您还可以创建自己的自定义指令以扩展 Vue 的功能。自定义指令由 JavaScript 对象组成，该对象定义指令的钩子函数。
指令钩子函数包括：
bind： 指令首次绑定到元素时调用
inserted： 指令绑定的元素插入 DOM 时调用
update： 指令绑定的元素或其属性更新时调用
componentUpdated： 指令所在的组件更新时调用
unbind： 指令与元素解绑时调用
有关 Vue 2 指令的更多信息，请参阅以下资源：
Vue 2 指令文档 [移除了无效网址]
创建自定义指令 [移除了无效网址]
以下是一些 Vue 2 指令的示例：
v-model 示例
HTML
此示例将 message 数据属性绑定到输入元素的值。当用户输入文本时，message 属性将相应更新。
v-if 示例
HTML
This will only be shown if show is true.
此示例将仅在 show 数据属性为真时显示
v-for 示例
HTML
- {{ item.name }}
此示例将循环遍历 items 数组并为每个项目渲染一个
自定义指令示例
JavaScript
Vue.directive('my-directive', {
bind(el, binding) {
el.textContent = binding.value
},
update(el, binding) {
el.textContent = binding.value
}
})
此示例定义了一个名为 my-directive 的自定义指令。该指令将元素的文本内容设置为指令的值。
HTML