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)。
    • 示例:

      javascript 复制代码
      <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 需为唯一值(推荐使用数据的唯一标识,而非索引)。

    • 示例:

      javascript 复制代码
      <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(只触发一次)等。
    • 示例:

      javascript 复制代码
      <button @click="handleClick">点击</button>
      <form @submit.prevent="handleSubmit">提交</form>

5. 属性绑定指令

  • v-bind
    • 作用:动态绑定 HTML 属性,缩写为 :

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

    • 应用场景:绑定 classstylesrchref 等。

    • 示例:

      javascript 复制代码
      <img :src="imgUrl" :alt="imgDesc">
      <div :class="{ active: isActive }"></div>

6. 双向绑定指令

  • v-model
    • 作用:在表单元素(输入框、复选框等)上实现数据双向绑定。

    • 本质:语法糖,结合 v-bind(绑定值)和 v-on:input(监听输入)。

    • 修饰符:

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

      javascript 复制代码
      <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 变化后不更新)
相关推荐
San30几秒前
CSS3 星球大战:用前端技术打造震撼的3D动画效果
前端·css·html
用户12039112947261 分钟前
从零构建一个HTML5敲击乐Web应用:前端开发最佳实践指南
前端
Violet_YSWY5 分钟前
将axios、async、Promise联系在一起讲一下&讲一下.then 与其关系
开发语言·前端·javascript
San309 分钟前
扩展卡片效果:用 Flexbox 和 CSS 过渡打造惊艳交互体验
前端·javascript·css
写代码的皮筏艇11 分钟前
JS数据类型转换
前端·javascript
Qinana12 分钟前
🌟 从 CSS 到 Stylus:打造更优雅、高效的样式开发体验
前端·javascript·css
AAA阿giao13 分钟前
弹性布局:CSS 布局的“变形金刚”来了!
前端·css
烟袅13 分钟前
🧱 从 inline-block 到 Flexbox:告别“空白符陷阱”,拥抱现代布局
前端·css
Joker`s smile15 分钟前
vue + elementUI 实现特殊字符(上标、下标、特殊符号等)输入框
vue.js·elementui·特殊字符·unicode字符·上标·下标
程序员Sunday16 分钟前
还在用 setTimeout?试试 requestIdleCallback 吧!
前端·javascript