Vue3 内置指令

模板中所有以 v- 开头的特殊写法都叫「指令」。指令给 HTML 元素附加动态行为，覆盖文本渲染、条件、循环、事件与表单等全部高频场景。掌握内置指令，就等于掌握了 Vue 模板语法的主体。

指令一览表

指令	作用
v-text	输出纯文本，等价于 {{ }}
v-html	输出 HTML 片段，慎防 XSS
v-show	切换 display 实现显隐
v-if / v-else-if / v-else	条件渲染，真正增删节点
v-for	列表循环
v-on	绑定事件，简写 @
v-bind	绑定属性，简写 :
v-model	表单双向绑定
v-slot	插槽内容，简写 #
v-pre / v-once / v-memo	跳过编译 / 只渲染一次 / 记忆化
v-cloak	防止未编译模板闪现

文本与 HTML

<p v-text="msg"></p>           <!-- 输出纯文本，等价于 {{ msg }} -->
<p v-html="content"></p>       <!-- 会解析 HTML 标签并渲染 -->

v-html 会把字符串当 HTML 解析，若内容来自用户输入必须先做过滤清洗，防止脚本注入。

条件与循环

<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>需要加油</p>

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

v-if 系列按条件增删节点，v-for 遍历数组渲染列表。两者写在同一元素上时 v-if 优先级更高，实践中应尽量避免同时使用。

事件、属性与双向绑定

<button v-on:click="submit">提交</button>   <!-- 简写：@click="submit" -->
<img v-bind:src="logo" alt="logo" />        <!-- 简写：:src="logo" -->
<input v-model="keyword" />                 <!-- 输入与状态实时同步 -->

v-model 本质是 v-bind 与 v-on 的语法糖，对 input、select、textarea 等表单元素开箱即用，输入内容会立即写回 keyword。

渲染控制类指令

<p v-once>{{ expensiveText }}</p>    <!-- 只渲染一次，之后不再响应更新 -->
<span v-pre>{{ 原样展示，不解析 }}</span>
<p v-cloak>数据加载中…</p>             <!-- 配合 CSS 隐藏，防止闪烁 -->

v-cloak 需搭配一段 CSS 才生效：

[v-cloak] { display: none; }

Vue 接管模板后会移除 v-cloak 属性，内容才显示出来，避免用户看到未编译的插值语法。

小结

内置指令是模板语法的主力：纯文本用 {{ }}、条件用 v-if 家族、循环用 v-for、事件用 @、表单用 v-model。记熟这五组，再按需了解 v-once、v-cloak 等控制类指令，即可应对绝大多数页面场景。