面试题：什么是 Vue 指令？Vue 有哪些常用的指令？

什么是 Vue 指令？

Vue 指令是带有 v- 前缀的特殊属性，用于在 DOM 元素上应用一些特殊的响应式行为。指令的值是一个 JavaScript 表达式（除了 v-for），Vue 会在运行时根据表达式的值动态地更新 DOM。

指令的主要作用是：

1. 将数据绑定到 DOM。
2. 监听 DOM 事件。
3. 动态修改 DOM 属性或结构。

---

Vue 常用指令

以下是 Vue 中常用的指令及其作用：

1. v-bind

• 作用：动态绑定 HTML 属性或组件 prop。
• 缩写：:（冒号）。
• 示例：

  <img v-bind:src="imageUrl">
  <!-- 缩写形式 -->
  <img :src="imageUrl">

2. v-model

• 作用：实现表单输入元素与数据的双向绑定。
• 适用元素：<input>、<textarea>、<select> 等表单元素。
• 示例：

  <input v-model="message" placeholder="请输入内容">
  <p>输入的内容是：{{ message }}</p>

3. v-on

• 作用：监听 DOM 事件并执行相应的 JavaScript 代码。
• 缩写：@（at 符号）。
• 示例：

  <button v-on:click="handleClick">点击我</button>
  <!-- 缩写形式 -->
  <button @click="handleClick">点击我</button>

4. v-if / v-else-if / v-else

• 作用：根据表达式的值条件性地渲染元素。
• 特点：元素会被完全销毁或重新创建。
• 示例：

  <div v-if="score >= 90">优秀</div>
  <div v-else-if="score >= 60">及格</div>
  <div v-else>不及格</div>

5. v-show

• 作用：根据表达式的值条件性地显示或隐藏元素。
• 特点：元素始终保留在 DOM 中，只是通过 CSS 的 display 属性控制显示或隐藏。
• 示例：

  <div v-show="isVisible">显示内容</div>

6. v-for

• 作用：基于数组或对象渲染列表。
• 示例：

  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>

7. v-text

• 作用：更新元素的 textContent。
• 示例：

  <span v-text="message"></span>
  <!-- 等价于 -->
  <span>{{ message }}</span>

8. v-html

• 作用：更新元素的 innerHTML。
• 注意：避免直接渲染用户输入的内容，防止 XSS 攻击。
• 示例：

  <div v-html="htmlContent"></div>

9. v-once

• 作用：只渲染元素和组件一次，后续数据变化不会更新。
• 示例：

  <span v-once>{{ message }}</span>

10. v-pre

• 作用：跳过该元素及其子元素的编译过程。
• 示例：

  <div v-pre>{{ 这里的内容不会被编译 }}</div>

11. v-cloak

• 作用：防止页面加载时未编译的 Mustache 标签（如 {{ }}）闪现。
• 示例：

  <div v-cloak>{{ message }}</div>

  [v-cloak] {
    display: none;
  }

---

自定义指令

除了内置指令，Vue 还允许开发者注册自定义指令，用于实现特定的 DOM 操作。

示例：自定义指令

Vue.directive('focus', {
  inserted(el) {
    el.focus(); // 元素插入 DOM 后自动聚焦
  }
});

<input v-focus>

---

总结

指令	作用	示例
v-bind	动态绑定属性	<img :src="imageUrl">
v-model	双向数据绑定	<input v-model="message">
v-on	监听事件	<button @click="handleClick">点击</button>
v-if	条件渲染	<div v-if="isVisible">内容</div>
v-show	条件显示/隐藏	<div v-show="isVisible">内容</div>
v-for	列表渲染	<li v-for="item in items">{{ item }}</li>
v-text	更新 textContent	<span v-text="message"></span>
v-html	更新 innerHTML	<div v-html="htmlContent"></div>
v-once	一次性渲染	<span v-once>{{ message }}</span>
v-pre	跳过编译	<div v-pre>{{ 这里的内容不会被编译 }}</div>
v-cloak	防止未编译的 Mustache 标签闪现	<div v-cloak>{{ message }}</div>

Vue 的指令是 Vue 模板语法的核心部分，熟练掌握这些指令可以极大地提高开发效率！