vue2 常用内置指令总结

1. 基础数据绑定指令

• v-text

  • 作用：将数据渲染为文本，替换元素的 textContent。
  • 特点：会覆盖元素原有的内容，无闪烁问题（对比插值语法）。
  • 示例：<div v-text="msg"></div>（msg 为数据属性）

• v-html

  • 作用：将数据渲染为 HTML 结构，替换元素的 innerHTML。
  • 特点：能解析 HTML 标签，但存在 XSS 安全风险，仅用于可信内容。
  • 示例：<div v-html="htmlStr"></div>（htmlStr 为含 HTML 的字符串）

2. 条件渲染指令

• v-if / v-else-if / v-else

  • 作用：根据表达式的真假条件渲染元素（动态创建 / 销毁 DOM）。

  • 特点：

    • 条件切换时会触发组件的生命周期钩子。
    • 可配合 <template> 实现多元素条件渲染（不生成额外 DOM）。

  • 示例：

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

• v-show

  • 作用：根据表达式的真假控制元素显示 / 隐藏（通过 display: none 切换）。
  • 特点：元素始终存在于 DOM 中，适合频繁切换的场景。
  • 与 v-if 区别：v-show 仅切换显示状态，v-if 直接操作 DOM 存在性。

3. 列表渲染指令

• v-for

  • 作用：基于数组或对象循环渲染列表。

  • 语法：v-for="(item, index) in 数组" 或 v-for="(value, key) in 对象"。

  • 必须绑定 key：提高重排效率，避免状态混乱，key 需为唯一值（推荐使用数据的唯一标识，而非索引）。

  • 示例：

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

4. 事件绑定指令

• v-on

  • 作用：绑定事件监听器，缩写为 @。

  • 语法：v-on:事件名="方法名" 或 @事件名="表达式"。

  • 特点：

    • 可传递参数：@click="handleClick(arg1, $event)"（$event 为原生事件对象）。
    • 支持事件修饰符：.stop（阻止冒泡）、.prevent（阻止默认行为）、.once（只触发一次）等。

  • 示例：

    <button @click="handleClick">点击</button>
    <form @submit.prevent="handleSubmit">提交</form>

5. 属性绑定指令

• v-bind

  • 作用：动态绑定 HTML 属性，缩写为 :。

  • 语法：v-bind:属性名="表达式" 或 :属性名="表达式"。

  • 应用场景：绑定 class、style、src、href 等。

  • 示例：

    <img :src="imgUrl" :alt="imgDesc">
    <div :class="{ active: isActive }"></div>

6. 双向绑定指令

• v-model

  • 作用：在表单元素（输入框、复选框等）上实现数据双向绑定。

  • 本质：语法糖，结合 v-bind（绑定值）和 v-on:input（监听输入）。

  • 修饰符：

    • .number：将输入转为数字类型。
    • .trim：去除首尾空格。
    • .lazy：失去焦点后同步数据（默认实时同步）。

  • 示例：

    <input v-model="username">
    <input v-model.number="age" type="number">

7. 其他常用指令

• v-pre

  • 作用：跳过元素和子元素的编译过程，直接显示原始内容（用于展示插值语法本身）。
  • 示例：<div v-pre>{``{ 这里不会被编译 }}</div>

• v-cloak

  • 作用：解决页面加载时因 Vue 未编译完成导致的插值语法闪烁问题。
  • 使用：配合 CSS [v-cloak]:{ display: none; }，编译完成后自动移除该属性。

• v-once

  • 作用：元素和组件只渲染一次，后续数据变化不会重新渲染（优化性能）。
  • 示例：<div v-once>{``{ msg }}</div>（msg 变化后不更新）