Vue 3 指令 & 示例

Vue 3 指令 & 示例

本文Vue 3 指令包含基础指令、动态指令、渲染指令、事件指令、表单指令、自定义指令，附简洁用法和示例，一看就会。

---

一、核心基础指令（最常用）

1. v-bind —— 动态绑定属性

简写：: 绑定 HTML 属性、class、style、组件 props。

<img :src="imgUrl" />
<div :class="{ active: isActive }"></div>
<button :disabled="isDisabled">按钮</button>

2. v-model —— 双向数据绑定

用于表单元素（input/select/textarea）和组件。

<input v-model="username" />
<select v-model="selected"></select>

3. v-on —— 事件绑定

简写：@ 绑定点击、输入、滚动等原生/自定义事件。

<button @click="handleClick">点击</button>
<input @input="handleInput" />
<form @submit.prevent="submit"></form>

4. v-if / v-else-if / v-else —— 条件渲染

真正销毁/创建 DOM，切换开销大。

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

5. v-show —— 显示/隐藏

仅切换 CSS display，初始开销大，频繁切换推荐用。

<div v-show="isShow">我会被隐藏但不会被删除</div>

6. v-for —— 列表渲染

循环数组/对象，必须绑定 key（唯一标识）。

<li v-for="(item, index) in list" :key="item.id">
  {{ index }} - {{ item.name }}
</li>

---

二、内容渲染指令

7. v-text —— 纯文本渲染

类似 {{ }}，但不会解析 HTML。

<span v-text="msg"></span>

8. v-html —— 渲染 HTML 字符串

⚠️ 注意安全，只在信任内容中使用。

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

9. v-pre —— 跳过编译

原样输出内容，不解析插值、指令。

<div v-pre>{{ 不会被解析 }}</div>

10. v-cloak —— 解决闪烁问题

配合 CSS 使用，防止页面加载时显示未编译模板。

[v-cloak] { display: none; }

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

11. v-once —— 只渲染一次

渲染后变成静态内容，提升性能。

<div v-once>{{ 只渲染一次 }}</div>

---

三、Vue 3 专属 / 增强指令

12. v-memo —— 缓存子树（Vue 3.2+）

依赖不变时跳过重新渲染，性能优化神器。

<div v-memo="[id, name]">
  只有 id/name 变化时才重新渲染
</div>

13. v-slot —— 插槽

简写：#，用于组件插槽内容分发。

<MyComponent>
  <template #header>标题</template>
  <template #default>默认内容</template>
</MyComponent>

---

四、特殊用途指令

14. v-is —— 动态组件

用于动态切换组件。

<component :is="ComName"></component>
<!-- 或在 DOM 模板中 -->
<div v-is="ComName"></div>

---

五、事件修饰符（配合 v-on 使用）

@click.stop       // 阻止冒泡
@click.prevent    // 阻止默认行为
@click.once       // 只触发一次
@click.capture    // 捕获模式
@click.self       // 只有点击自身才触发
@scroll.passive   // 提升滚动性能

六、按键修饰符

@keyup.enter      // 回车
@keyup.esc        // 退出
@keyup.tab
@keyup.space
@keyup.up / down / left / right

---

七、v-model 修饰符

v-model.lazy      // 失焦后同步
v-model.number    // 转数字
v-model.trim      // 去首尾空格

---

八、自定义指令（Vue 3 写法）

Vue 3 自定义指令生命周期：

• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount
• unmounted

示例：自动聚焦指令

<script setup>
const vFocus = {
  mounted(el) {
    el.focus()
  }
}
</script>

<template>
  <input v-focus />
</template>

---

超简记忆口诀

渲染用：v-text / v-html / v-pre / v-once / v-cloak
循环用：v-for
条件用：v-if / v-show
绑定用：v-bind(:) / v-model
事件用：v-on(@)
插槽用：v-slot(#)
优化用：v-memo
自定义：v-xxx

---