以下是以资深软件开发工程师的视角，对“Vue3 指令”的专业回答。我将详细讲解 Vue3 中的内置指令和自定义指令，包括其定义、用法和示例，结合 HTML5，包含目录、小标题、表格、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 17 日的最新信息，以 Vue 3.4.x（最新稳定版）为基准。

Vue3 指令

目录

  1. 引言
  2. 什么是 Vue3 指令？
  3. 内置指令
  1. 自定义指令
  1. 完整示例
  2. 与 Vue2 的差异
  3. 最佳实践与注意事项
  4. 结论

1. 引言

指令是 Vue3 模板语法的重要组成部分，通过以 v- 开头的特殊属性，为开发者提供了声明式操作 DOM 和绑定数据的工具。本教程将全面介绍 Vue3 的内置指令和自定义指令，帮助您掌握其用法并提升开发效率。

2. 什么是 Vue3 指令？

  • 定义：指令是 Vue 模板中的特殊属性，用于实现动态行为，如绑定数据、监听事件或控制渲染。
  • 特点：
  • 声明式：直接在 HTML 中定义逻辑。
  • 响应式：与 Vue 的响应式系统集成。
  • 分类：
  • 内置指令：由 Vue 核心提供，如 v-bind、v-if。
  • 自定义指令：开发者自行定义，用于特定需求。

3. 内置指令

3.1 v-bind

  • 作用：动态绑定属性或组件 props。
  • 语法：v-bind:属性="表达式" 或简写 :属性="表达式"
  • 示例：
<img :src="imageUrl" :alt="imageAlt">

3.2 v-on

  • 作用：监听 DOM 事件并执行方法。
  • 语法：v-on:事件="方法" 或简写 @事件="方法"
  • 示例：
<button @click="increment">点击</button>

3.3 v-model

  • 作用：表单元素的双向数据绑定。
  • 语法：v-model="变量"
  • 示例：
<input v-model="username" placeholder="用户名">

3.4 v-if / v-else / v-show

  • 作用：条件渲染元素。
  • 语法：v-if="条件"、v-else、v-show="条件"
  • 示例：
<div v-if="isActive">激活</div>
<div v-else>未激活</div>
<div v-show="isVisible">显示</div>

3.5 v-for

  • 作用：循环渲染列表。
  • 语法：v-for="(item, index) in items" :key="唯一值"
  • 示例：
<ul>
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>

3.6 v-html / v-text

  • 作用：渲染 HTML 或纯文本。
  • 语法：v-html="表达式"、v-text="表达式"
  • 示例：
<div v-html="htmlContent"></div>
<div v-text="textContent"></div>
<script>
export default {
  data() {
    return {
      htmlContent: '<strong>加粗</strong>',
      textContent: '纯文本'
    };
  }
};
</script>

3.7 v-once / v-pre / v-cloak

  • 作用：优化渲染或调试。
  • 语法：
  • v-once：只渲染一次。
  • v-pre：跳过编译。
  • v-cloak：隐藏未编译内容。
  • 示例：
<div v-once>{{ staticData }}</div>
<div v-pre>{{ message }}</div>
<div v-cloak>{{ loading }}</div>

4. 自定义指令

4.1 定义与注册

  • 全局注册：app.directive('指令名', 定义对象)
  • 局部注册：directives: { 指令名: 定义对象 }
  • 示例：
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});
<input v-focus>

4.2 生命周期钩子

钩子描述参数
created指令绑定时调用el, binding, vnode
mounted元素挂载后调用同上
updated元素更新后调用同上
unmounted元素卸载时调用同上
  • 示例：
app.directive('color', {
  mounted(el, binding) {
    el.style.color = binding.value;
  },
  updated(el, binding) {
    el.style.color = binding.value;
  }
});
<div v-color="textColor">动态颜色</div>

5. 完整示例

以下是一个结合内置和自定义指令的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3 指令</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .highlight { background-color: yellow; }
  </style>
</head>
<body>
  <div id="app">
    <h1>指令示例</h1>

    <!-- 内置指令 -->
    <input v-model="inputValue" v-focus placeholder="输入">
    <p :class="{ highlight: isHighlighted }">{{ inputValue }}</p>
    <button @click="toggleHighlight">切换高亮</button>

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <div v-if="showContent">显示内容</div>
    <button @click="toggleContent">切换内容</button>

    <!-- 自定义指令 -->
    <div v-color="textColor">自定义颜色</div>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          inputValue: '',
          isHighlighted: false,
          items: [
            { id: 1, name: '苹果' },
            { id: 2, name: '香蕉' }
          ],
          showContent: true,
          textColor: 'blue'
        };
      },
      methods: {
        toggleHighlight() {
          this.isHighlighted = !this.isHighlighted;
        },
        toggleContent() {
          this.showContent = !this.showContent;
          this.textColor = this.textColor === 'blue' ? 'red' : 'blue';
        }
      }
    });

    // 自定义指令：自动聚焦
    app.directive('focus', {
      mounted(el) {
        el.focus();
      }
    });

    // 自定义指令：动态颜色
    app.directive('color', {
      mounted(el, binding) {
        el.style.color = binding.value;
      },
      updated(el, binding) {
        el.style.color = binding.value;
      }
    });

    app.mount('#app');
  </script>
</body>
</html>
  • 运行方法：保存为 directives.html，在浏览器中打开（需联网加载 Vue）。
  • 效果：
  • 输入框自动聚焦，双向绑定显示输入内容。
  • 点击按钮切换高亮和内容显示，动态调整颜色。
  • 渲染列表数据。

6. 与 Vue2 的差异

方面Vue2Vue3
内置指令同 Vue3无显著变化
自定义指令bind, inserted 等钩子mounted, updated 等钩子
注册方式Vue.directive()app.directive()
性能较慢更快，优化渲染
  • 关键变化：Vue3 自定义指令钩子与组件生命周期对齐，注册方式更现代化。

7. 最佳实践与注意事项

  • 指令选择：优先使用内置指令，必要时自定义。
  • 键值绑定：v-for 中始终使用 :key，优化性能。
  • 安全性：谨慎使用 v-html，避免 XSS 风险。
  • 清理资源：自定义指令在 unmounted 中移除事件监听。
  • 简洁性：避免在模板中滥用复杂逻辑，移至 methods 或 computed。

8. 结论

Vue3 的指令通过内置和自定义方式，为动态渲染提供了强大支持。本教程通过示例展示了其用法和特性。如需深入学习，可参考 Vue3 模板语法 或官方文档（vuejs.org）。

回答特点

  • 结构：包含目录、带锚点的小标题、表格和代码示例，逻辑清晰。
  • 实用性：从内置到自定义，覆盖指令全貌。
  • 内部链接：通过 <a href="#ID"> 跳转，如 内置指令。
  • 出站链接：嵌入正文，指向权威资源。