当前位置：首页 > news >正文

vue - 内置指令

news 2026/6/11 21:37:34

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

一、核心渲染指令

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

v-text
- 功能：更新元素的文本内容（相当于 textContent）。
- 示例：
```
<span v-text="message"></span>

<span>{{ message }}</span>
```
- 特点：会覆盖元素原有的文本，而插值表达式 {{}} 只会替换占位符。
v-html
- 功能：将数据以 HTML 格式插入元素（相当于 innerHTML）。
- 示例：
```
<div v-html="rawHtml"></div>
```
- 注意：动态渲染 HTML 存在 XSS 风险，仅用于可信内容，禁止用于用户输入。
v-show
- 功能：根据表达式的真假值，通过 CSS display 属性控制元素显示/隐藏。
- 示例：
```
<p v-show="isVisible">条件显示</p>
```
- 特点：元素始终存在于 DOM 中，只是切换显示状态，适合频繁切换的场景。
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> 配合实现多元素条件渲染。

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 事件。

v-on
- 功能：绑定事件监听器，缩写为 @。
- 示例：
```
<button v-on:click="handleClick">点击</button>
<button @click="handleClick">点击（缩写）</button>
```
- 扩展：
  - 支持事件修饰符：@click.stop（阻止冒泡）、@click.prevent（阻止默认行为）等。
  - 支持按键修饰符：@keyup.enter（回车键触发）。
  - 支持自定义事件：@custom-event="handleEvent"。

三、属性绑定指令

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

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>

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

四、表单输入绑定指令

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

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 事件触发时更新数据。

五、其他实用指令

v-pre
- 功能：跳过元素及其子元素的编译过程，直接渲染原始内容。
- 示例：
```
<div v-pre>{{ 这里的表达式不会被编译 }}</div>
```
- 适用场景：展示包含 {{ }} 的原始文本，提升编译性能。
v-cloak
- 功能：在 Vue 实例编译完成前隐藏元素，避免未编译的模板闪烁。
- 用法：
```
[v-cloak] { display: none; }
```
```
<div v-cloak>{{ message }}</div>
```
- 原理：编译完成后，Vue 会自动移除 v-cloak 属性。
v-once
- 功能：元素或组件只渲染一次，后续数据变化不会重新渲染。
- 示例：
```
<div v-once>{{ message }}</div>
```
- 适用场景：优化静态内容的渲染性能。