Vue：常用指令和用法

一、核心指令（最常用）

1. 文本与属性绑定

• ​​v-bind​​ / ​:​

  动态绑定一个或多个 HTML 属性、组件 Prop 到表达式。

  <img :src="imageUrl">
  <a v-bind:href="url">链接</a>
  <div :class="{ active: isActive }">动态类</div>
  <button :disabled="isDisabled">按钮</button>
  <!-- 绑定整个对象 -->
  <div v-bind="objectOfAttrs"></div>
  

• ​​v-model​

  在表单输入元素或组件上创建双向数据绑定。是 :value​和 @input 的语法糖。

  <!-- 文本输入框 -->
  <input v-model="message" placeholder="编辑我">
  <p>输入的是：{{ message }}</p>
  
  <!-- 复选框 -->
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  
  <!-- 下拉框 -->
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
  </select>
  

• ​​v-text​

  更新元素的 textContent​。等同于 {{ }} 插值，但能避免编译前的闪现。

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

• ​​v-html​

  更新元素的 innerHTML​。警告：内容按普通 HTML 插入，极易导致 XSS 攻击。只用于绝对可信的内容。

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

2. 条件渲染

• ​​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>Not A/B</div>
  

• ​​v-show​

  根据表达式真假值，切换元素的 display​CSS 属性。元素始终会被渲染并保留在 DOM 中。

  <h1 v-show="isVisible">你好！</h1>
  

• ​​v-if​​vs ​v-show​：

  ​v-if 是“真正的”条件渲染，不满足条件时元素不在 DOM 树中。切换开销大，适用于运行时条件很少改变的场景。

  ​v-show 只是简单的 CSS 切换。初始渲染开销大，适用于需要频繁切换显示/隐藏的场景。

3. 列表渲染

• ​​v-for​

  基于源数据多次渲染一个元素或模板块。

  <!-- 遍历数组 -->
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.text }}
  </li>
  <!-- 遍历对象 -->
  <li v-for="(value, key, index) in myObject">
    {{ index }}.{{ key }}: {{ value }}
  </li>
  <!-- 遍历数字 -->
  <span v-for="n in 10">{{ n }}</span>
  

  必须为每项提供一个唯一的 :key attribute，以便 Vue 跟踪节点身份，实现高效的重用和重排。

4. 事件处理

• ​​v-on​​ / ​@​

  绑定事件监听器。事件类型由参数指定。

  <!-- 内联处理器 -->
  <button @click="count++">加 1</button>
  <!-- 方法处理器 -->
  <button @click="greet">问候</button>
  <!-- 内联调用方法 -->
  <button @click="say('你好', $event)">说你好</button>
  <!-- 事件修饰符 -->
  <form @submit.prevent="onSubmit">...</form>
  <a @click.stop.prevent="doThat">链接</a>
  <!-- 按键修饰符 -->
  <input @keyup.enter="submit">
  

二、进阶与特殊指令

5. 插槽相关 (用于组件)

• ​​v-slot​​ / ​#​

  提供具名插槽或需要接收 Prop 的作用域插槽。只能用于 <template> 或组件上。

  <!-- 子组件 BaseLayout -->
  <div class="container">
    <slot name="header"></slot>
    <slot :user="userData"></slot>
  </div>
  <!-- 父组件中使用 -->
  <BaseLayout>
    <template #header>这里是标题</template>
    <template #default="slotProps">
      收到数据：{{ slotProps.user }}
    </template>
  </BaseLayout>
  

6. 特殊指令

• ​​v-cloak​

  与 CSS 规则 [v-cloak] { display: none; }​一起使用，可以隐藏尚未编译完成的 Mustache 标签（{{ }}），直到实例准备完毕。解决页面闪动问题。

  [v-cloak] { display: none; }
  

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

• ​​v-pre​

  跳过这个元素及其所有子元素的编译。用于显示原始 Mustache 标签或大量静态内容以优化性能。

  <span v-pre>{{ 这里的内容不会被编译 }}</span>
  

• ​​v-once​

  只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有子节点将被视为静态内容并跳过。用于优化更新性能。

  <span v-once>这个值永远不会改变：{{ staticValue }}</span>
  

• ​​v-memo​ (Vue 3.2+)

  缓存一个模板的子树。仅当其依赖的特定数组值发生变化时才会更新。用于超大虚拟 DOM 树的渲染优化。

  <div v-memo="[valueA, valueB]">
    <!-- 仅当 valueA 或 valueB 改变时，才会更新 -->
  </div>