vue - 内置指令

Vue3 提供了一系列内置指令，用于简化 DOM 操作和实现常见功能。这些指令以 v- 前缀开头，通常用于模板中，以下是详细分类及解析：

一、核心渲染指令

用于控制元素的渲染逻辑和数据绑定。

1. v-text

   • 功能：更新元素的文本内容（相当于 textContent）。

   • 示例：

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

   • 特点：会覆盖元素原有的文本，而插值表达式 {{}} 只会替换占位符。

2. v-html

   • 功能：将数据以 HTML 格式插入元素（相当于 innerHTML）。

   • 示例：

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

   • 注意：动态渲染 HTML 存在 XSS 风险，仅用于可信内容，禁止用于用户输入。

3. v-show

   • 功能：根据表达式的真假值，通过 CSS display 属性控制元素显示/隐藏。

   • 示例：

     <p v-show="isVisible">条件显示</p>
     

   • 特点：元素始终存在于 DOM 中，只是切换显示状态，适合频繁切换的场景。

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

   • 功能：根据表达式的真假值，动态创建/销毁元素（条件渲染）。

   • 示例：

     <div v-if="type === 'A'">A</div>
     <div v-else-if="type === 'B'">B</div>
     <div v-else>Other</div>
     

   • 特点：会真实改变 DOM 结构，适合条件较少切换的场景；可与 <template> 配合实现多元素条件渲染。

5. v-for

   • 功能：基于可迭代数据（数组、对象、字符串等）循环渲染元素。

   • 示例：

     <!-- 遍历数组 -->
     <li v-for="(item, index) in items" :key="index">{{ index }}: {{ item.name }}
     </li><!-- 遍历对象 -->
     <div v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}
     </div>
     

   • 注意：必须使用 :key 绑定唯一标识，优化渲染性能并避免状态混乱。

二、事件处理指令

用于绑定 DOM 事件。

1. v-on

   • 功能：绑定事件监听器，缩写为 @。

   • 示例：

     <button v-on:click="handleClick">点击</button>
     <button @click="handleClick">点击（缩写）</button>
     

   • 扩展：

     • 支持事件修饰符：@click.stop（阻止冒泡）、@click.prevent（阻止默认行为）等。
     • 支持按键修饰符：@keyup.enter（回车键触发）。
     • 支持自定义事件：@custom-event="handleEvent"。

三、属性绑定指令

用于绑定 HTML 属性或组件 props。

1. v-bind

   • 功能：动态绑定一个或多个属性，缩写为 :。

   • 示例：

     <!-- 绑定 HTML 属性 -->
     <img v-bind:src="imageUrl" :alt="imageAlt"><!-- 绑定 class -->
     <div :class="{ active: isActive, 'text-danger': hasError }"></div><!-- 绑定 style -->
     <div :style="{ color: textColor, fontSize: '16px' }"></div><!-- 绑定组件 props -->
     <ChildComponent :user="currentUser"></ChildComponent>
     

   • 特点：可绑定任意属性，表达式结果会被解析为属性值。

四、表单输入绑定指令

用于在表单元素和数据之间创建双向绑定。

1. v-model

   • 功能：简化表单控件的双向数据绑定（本质是 v-bind + v-on 的语法糖）。

   • 支持元素：input、textarea、select 等。

   • 示例：

     <input v-model="username" type="text">
     <textarea v-model="content"></textarea>
     <select v-model="selectedValue"><option value="1">选项1</option>
     </select>
     

   • 修饰符：

     • .trim：自动去除输入首尾空格。
     • .number：将输入转为数字类型。
     • .lazy：在 change 事件而非 input 事件触发时更新数据。

五、其他实用指令

1. v-pre

   • 功能：跳过元素及其子元素的编译过程，直接渲染原始内容。

   • 示例：

     <div v-pre>{{ 这里的表达式不会被编译 }}</div>
     

   • 适用场景：展示包含 {{ }} 的原始文本，提升编译性能。

2. v-cloak

   • 功能：在 Vue 实例编译完成前隐藏元素，避免未编译的模板闪烁。

   • 用法：

     [v-cloak] { display: none; }
     

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

   • 原理：编译完成后，Vue 会自动移除 v-cloak 属性。

3. v-once

   • 功能：元素或组件只渲染一次，后续数据变化不会重新渲染。

   • 示例：

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

   • 适用场景：优化静态内容的渲染性能。

总结

Vue3 内置指令可分为以下几类：

• 渲染控制：v-text、v-html、v-show、v-if/v-else、v-for
• 事件处理：v-on（@）
• 属性绑定：v-bind（:）
• 表单绑定：v-model
• 性能/编译控制：v-pre、v-cloak、v-once

这些指令覆盖了日常开发的大部分场景，通过简化 DOM 操作，使开发者更专注于数据逻辑而非 DOM 细节。