在 Vue.js 中，指令是用于在模板中绑定数据和 DOM 元素之间关系的特殊属性。指令通常以 v- 开头，后面跟上指令的名字。了解和使用这些指令是掌握 Vue.js 的关键之一。下面是一些 Vue.js 中常见的指令及其用法。
1. v-bind
- 作用：动态地绑定 HTML 属性或特性。
- 简写：
: - 用法：
<img v-bind:src="imageUrl"> <!-- 简写 --> <img :src="imageUrl"> - 示例：
<a :href="url">链接</a>
2. v-model
- 作用：实现双向数据绑定，常用于表单控件（如输入框、复选框、单选按钮等）。
- 用法：
<input v-model="message" placeholder="请输入内容"> <p>{{ message }}</p> - 以上示例实现了输入框内容的实时显示。
3. v-if
-
作用：条件渲染，只有当条件为
true时，元素才会渲染。 -
用法：
<p v-if="seen">这段文字会被条件渲染</p> -
搭配使用：
v-else：用于处理v-if为false的情况。v-else-if：用于处理多个条件分支。
<p v-if="type === 'A'">A 类内容</p> <p v-else-if="type === 'B'">B 类内容</p> <p v-else>其他内容</p>
4. v-show
- 作用：通过切换元素的
display样式实现显示和隐藏。 - 与
v-if的区别：v-if是真正的条件渲染，会添加或删除 DOM 元素；v-show只是切换元素的可见性，元素始终存在于 DOM 中。 - 用法：
<p v-show="isVisible">这个元素通过 v-show 控制显示和隐藏</p>
5. v-for
- 作用：用于循环渲染一个列表。
- 用法：
<ul><li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> - 注意事项：循环元素时，建议添加
:key属性，确保每个元素有唯一标识，以帮助 Vue 追踪元素的变化。
6. v-on
-
作用：用于绑定事件监听器。
-
简写：
@ -
用法：
<button v-on:click="handleClick">点击我</button> <!-- 简写 --> <button @click="handleClick">点击我</button> -
事件修饰符：
.stop：阻止事件冒泡。.prevent：阻止默认事件。.capture：使用事件捕获模式。.self：只在事件从自身元素触发时才触发回调。.once：事件只触发一次。
<button @click.stop="handleClick">阻止冒泡</button> <form @submit.prevent="onSubmit">阻止表单默认提交</form>
7. v-cloak
- 作用：用于解决页面渲染闪烁的问题，在 Vue 实例准备好并编译完毕后移除该指令。
- 用法：
<div v-cloak>{{ message }} </div> - 用法注意：需要在 CSS 中添加
[v-cloak] { display: none; }样式。
8. v-text
- 作用：用于更新元素的
textContent，类似于插值{{}}。 - 用法：
<span v-text="message"></span> - 区别：与插值不同的是，
v-text会替换整个元素的内容。
9. v-html
- 作用：用于输出 HTML 内容。注意：使用时需要小心，可能会导致 XSS 攻击。
- 用法：
<div v-html="htmlContent"></div>
10. v-pre
- 作用：跳过这个元素和它的子元素的编译过程。用于直接显示原始的 Mustache 标签。
- 用法：
<div v-pre>{{ rawMustache }}</div>
11. v-once
- 作用：只渲染元素和组件一次。以静态内容渲染，一旦被渲染后，Vue 不会再次更新该元素。
- 用法：
<p v-once>{{ message }}</p>
除了上面提到的常见指令，Vue.js 还有一些指令可以进一步优化和增强应用的开发。以下是一些稍微高级一些或较少见的指令，但在特定场景下非常有用。
12. v-slot
- 作用：用于定义组件插槽（slots），帮助在父组件中传递内容到子组件的特定位置。
- 用法：
<!-- 父组件 --> <custom-component><template v-slot:default><p>这是默认插槽的内容</p></template><template v-slot:header><h1>这是头部插槽的内容</h1></template> </custom-component> - 简写形式：
#header相当于v-slot:header。
13. v-bind.sync
- 作用：用于同步父组件和子组件之间的 prop 值，可以实现双向绑定。
- 用法：
<child-component :value.sync="parentValue"></child-component> - 等效于：
<child-component :value="parentValue" @update:value="val => parentValue = val"></child-component>
14. v-on:custom-event
- 作用：监听自定义事件，这是通过
$emit在子组件中触发的。 - 用法：
<child-component @custom-event="handleCustomEvent"></child-component>
15. v-bind:is
- 作用：用于动态地渲染不同的组件或 HTML 元素。
- 用法：
<component v-bind:is="currentComponent"></component> - 示例：
<div v-bind:is="isButton ? 'button' : 'a'">{{ text }}</div>
16. v-once
- 作用：将元素或组件仅渲染一次，之后不再更新。适用于不需要响应变化的静态内容。
- 用法：
<p v-once>{{ message }}</p>
17. v-memo
- 作用：用于缓存部分模板的渲染输出，提升性能。配合
v-memo使用的表达式为其依赖的变化条件。 - 用法：
<div v-memo="[user.id]"><p>{{ user.name }}</p> </div>
18. v-bind.class 和 v-bind.style
- 作用：动态绑定 class 和内联样式。
- 用法：
- 动态 class：
<div v-bind:class="{ active: isActive }"></div> <div :class="[classA, classB]"></div> - 动态 style：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
- 动态 class：
19. v-bind:key
- 作用：为渲染的元素或组件设置唯一标识，帮助 Vue 在渲染过程中跟踪和复用元素或组件。
- 用法：
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
20. v-bind:ref
- 作用：在模板中为元素或子组件注册引用，可以在 JavaScript 中访问这些引用。
- 用法：
<input v-bind:ref="inputRef"> - 访问引用：
this.$refs.inputRef.focus();
21. v-bind:slot-scope
- 作用：在 2.x 版本中，用于在插槽上定义作用域。3.x 版本改为
v-slot。 - 用法：
<slot :user="user"></slot>
22. 自定义指令（v-directive）
- 作用：Vue 允许你定义自己的指令来扩展默认指令的功能。
- 用法：
Vue.directive('focus', {inserted: function (el) {el.focus();} }); - 在模板中使用：
<input v-focus>
23. v-bind:[attribute] 动态属性
- 作用：允许你根据表达式的值动态绑定 HTML 属性。
- 用法：
<button v-bind:[dynamicAttr]="value">{{ text }}</button>
24. v-on:[event] 动态事件
- 作用：允许你根据表达式的值动态绑定事件。
- 用法：
<button v-on:[dynamicEvent]="handler">{{ text }}</button>
