vue指令

Vue指令详解与应用

原创于 2025-10-20 15:57:28 发布 · 903 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue指令

v-text：

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

v-html：
可直接进行一整个HTML的引入进行

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

v-if：

用法:根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

注：`当和 v-if 一起使用时，v-for 的优先级比 v-if 更高`

v-else：
在同一父级下进行使用
- 不需要表达式
- 限制：前一兄弟元素必须有 v-if 或 v-else-if。
- 用法：为 v-if 或者 v-else-if 添加“else 块”。
```
 <div>
     <div v-if="Math.random() > 0.5">  Now you see me  </div>
     <div v-else>  Now you don't  </div>
</div>
```

v-else-if：
在同一父级下进行使用

类型：any.
限制：前一兄弟元素必须有 v-if 或 v-else-if。
用法：表示 v-if 的else if 块。可以链式调用。

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

`Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：`

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

`v-if vs v-show`

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for:

预期：Array | Object | number | string | Iterable (2.6 新增)
- 用法：
  基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

     <div v-for="item in items">{{ item.text }}</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items">{{item.text}}</div>
<div v-for="(val, key) in object">{{val.text}}</div>
<div v-for="(val, name, index) in object">{{val.text}}</div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>
** 从 2.6 起，v-for 也可以在实现了可迭代协议的值上使用，包括原生的 Map 和 Set。不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值，所以无法自动探测变更。

v-on: 简写@

<!-- 方法处理器 -->
<button v-on:click="doThis"></button> 
 ===
 <!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

---在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

v-bind:
- 缩写：:
- 预期：any (with argument) | Object (without argument)
- 修饰符：
  1. .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。
  
  2..camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
  
  3..sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

<!-- 绑定一个 attribute<属性> -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

注： `.camel修饰符允许在使用 DOM 模板时将 v-bind property 名称驼峰化`

例如 SVG 的 viewBox property：

<svg :view-box.camel="viewBox"></svg>

Clsaa与Style进行绑定：

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
1.对象语法：我们可以给V-bind：class一个对象，用来动态的切换class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的真实性。
根据条件切换列表中的 class，可以用三元表达式

<div v-bind:class="[isActive ? activeClass : '']"></div>
> 当isActive 为真时，执行activeClass ，为假时候执行activeClass 。

2.对象语法：
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

HTML
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
js
data: {
activeColor: 'red',
fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>
data: {
styleObject: {
  color: 'red',
  fontSize: '13px'
}
}

vue指令

vue指令

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

v-if vs v-show

v-for:

注： .camel修饰符允许在使用 DOM 模板时将 v-bind property 名称驼峰化

Clsaa与Style进行绑定：

`Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：`

`v-if vs v-show`

注： `.camel修饰符允许在使用 DOM 模板时将 v-bind property 名称驼峰化`