在 Vue.js 中，指令（Directives）是特殊的 HTML 属性，用于在模板中绑定行为。Vue 提供了许多内置指令，你也可以定义自定义指令。以下是指令的分类和常用用法：
1. 内置指令
v-bind
用于动态绑定属性或特性。
<a v-bind:href="url">访问链接</a>
<!-- 缩写 -->
<a :href="url">访问链接</a>
v-model
用于双向绑定表单元素的值。
<input v-model="message" placeholder="输入内容">
<p>内容：{{ message }}</p>
v-if
条件渲染，根据表达式的值动态添加或移除 DOM。
<p v-if="seen">这是一条信息</p>
v-else / v-else-if
配合 v-if 使用。
<p v-if="type === 'A'">A 类型</p>
<p v-else-if="type === 'B'">B 类型</p>
<p v-else>其他类型</p>
v-show
条件渲染，但不移除元素，仅切换 display 样式。
<p v-show="isVisible">显示内容</p>
v-for
用于列表渲染。
<ul>
<li v-for="(item, index) in items" :key="index">
{{ index }}: {{ item }}
</li>
</ul>
v-on
绑定事件监听器。
<button v-on:click="sayHello">点击我</button>
<!-- 缩写 -->
<button @click="sayHello">点击我</button>
v-html
插入 HTML 内容。
<div v-html="htmlContent"></div>
v-text
更新文本内容。
<p v-text="text"></p>
v-cloak
防止未编译内容闪烁，用于保持元素隐藏，直到 Vue 实例准备完毕。
<p v-cloak>加载中...</p>
v-once
一次性绑定，渲染后不会更新。
<p v-once>{{ message }}</p>
v-pre
跳过编译，输出原始 Mustache 表达式。
<p v-pre>{{ message }}</p>
2. 自定义指令
Vue 支持创建自定义指令，用于处理复杂的 DOM 操作。
注册局部指令
export default {
directives: {
focus: {
// 当绑定的元素插入到 DOM 中时调用
inserted(el) {
el.focus();
}
}
}
}
注册全局指令
Vue.directive('focus', {
inserted(el) {
el.focus();
}
});
在模板中使用
<input v-focus>
指令钩子函数
- bind：绑定指令时调用。
- inserted：元素插入 DOM 时调用。
- update：组件更新时调用。
- componentUpdated：组件及其子组件更新完成后调用。
- unbind：指令解绑时调用。
Vue.directive('demo', {
bind(el, binding, vnode) {
console.log('绑定');
},
inserted(el) {
console.log('插入');
},
update(el, binding) {
console.log('更新');
},
componentUpdated(el, binding) {
console.log('更新完成');
},
unbind(el) {
console.log('解绑');
}
});
3. 修饰符
修饰符是以点开头的后缀，用于修改指令的行为。
v-on 修饰符
.stop：阻止事件冒泡。.prevent：阻止默认事件。.capture：使用捕获模式。.self：只在事件从绑定元素本身触发时触发。.once：事件只触发一次。.passive：不阻止默认行为（如滚动）。
<button @click.stop="doSomething">阻止冒泡</button>
v-model 修饰符
.lazy：绑定在change事件而非input。.number：将输入值转换为数字。.trim：自动移除首尾空格。
<input v-model.lazy="message">
<input v-model.number="age">
<input v-model.trim="text">
4. 动态指令
指令可以动态使用。
<div v-bind:[attributeName]="value"></div>
<div v-on:[eventName]="handler"></div>
通过 Vue 的指令，你可以轻松实现模板与数据的高效绑定。
