在 Vue.js 中,指令是用于在模板中绑定数据和 DOM 元素之间关系的特殊属性。指令通常以 v-
开头,后面跟上指令的名字。了解和使用这些指令是掌握 Vue.js 的关键之一。下面是一些 Vue.js 中常见的指令及其用法。
1. v-bind
- 作用:动态地绑定 HTML 属性或特性。
- 简写:
:
- 用法:
<img v-bind:src="imageUrl"> <!-- 简写 --> <img :src="imageUrl">
- 示例:
<a :href="url">链接</a>
2. v-model
- 作用:实现双向数据绑定,常用于表单控件(如输入框、复选框、单选按钮等)。
- 用法:
<input v-model="message" placeholder="请输入内容"> <p>{{ message }}</p>
- 以上示例实现了输入框内容的实时显示。
3. v-if
-
作用:条件渲染,只有当条件为
true
时,元素才会渲染。 -
用法:
<p v-if="seen">这段文字会被条件渲染</p>
-
搭配使用:
v-else
:用于处理v-if
为false
的情况。v-else-if
:用于处理多个条件分支。
<p v-if="type === 'A'">A 类内容</p> <p v-else-if="type === 'B'">B 类内容</p> <p v-else>其他内容</p>
4. v-show
- 作用:通过切换元素的
display
样式实现显示和隐藏。 - 与
v-if
的区别:v-if
是真正的条件渲染,会添加或删除 DOM 元素;v-show
只是切换元素的可见性,元素始终存在于 DOM 中。 - 用法:
<p v-show="isVisible">这个元素通过 v-show 控制显示和隐藏</p>
5. v-for
- 作用:用于循环渲染一个列表。
- 用法:
<ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul>
- 注意事项:循环元素时,建议添加
:key
属性,确保每个元素有唯一标识,以帮助 Vue 追踪元素的变化。
6. v-on
-
作用:用于绑定事件监听器。
-
简写:
@
-
用法:
<button v-on:click="handleClick">点击我</button> <!-- 简写 --> <button @click="handleClick">点击我</button>
-
事件修饰符:
.stop
:阻止事件冒泡。.prevent
:阻止默认事件。.capture
:使用事件捕获模式。.self
:只在事件从自身元素触发时才触发回调。.once
:事件只触发一次。
<button @click.stop="handleClick">阻止冒泡</button> <form @submit.prevent="onSubmit">阻止表单默认提交</form>
7. v-cloak
- 作用:用于解决页面渲染闪烁的问题,在 Vue 实例准备好并编译完毕后移除该指令。
- 用法:
<div v-cloak> {{ message }} </div>
- 用法注意:需要在 CSS 中添加
[v-cloak] { display: none; }
样式。
8. v-text
- 作用:用于更新元素的
textContent
,类似于插值{{}}
。 - 用法:
<span v-text="message"></span>
- 区别:与插值不同的是,
v-text
会替换整个元素的内容。
9. v-html
- 作用:用于输出 HTML 内容。注意:使用时需要小心,可能会导致 XSS 攻击。
- 用法:
<div v-html="htmlContent"></div>
10. v-pre
- 作用:跳过这个元素和它的子元素的编译过程。用于直接显示原始的 Mustache 标签。
- 用法:
<div v-pre>{{ rawMustache }}</div>
11. v-once
- 作用:只渲染元素和组件一次。以静态内容渲染,一旦被渲染后,Vue 不会再次更新该元素。
- 用法:
<p v-once>{{ message }}</p>
除了上面提到的常见指令,Vue.js 还有一些指令可以进一步优化和增强应用的开发。以下是一些稍微高级一些或较少见的指令,但在特定场景下非常有用。
12. v-slot
- 作用:用于定义组件插槽(slots),帮助在父组件中传递内容到子组件的特定位置。
- 用法:
<!-- 父组件 --> <custom-component> <template v-slot:default> <p>这是默认插槽的内容</p> </template> <template v-slot:header> <h1>这是头部插槽的内容</h1> </template> </custom-component>
- 简写形式:
#header
相当于v-slot:header
。
13. v-bind.sync
- 作用:用于同步父组件和子组件之间的 prop 值,可以实现双向绑定。
- 用法:
<child-component :value.sync="parentValue"></child-component>
- 等效于:
<child-component :value="parentValue" @update:value="val => parentValue = val"></child-component>
14. v-on:custom-event
- 作用:监听自定义事件,这是通过
$emit
在子组件中触发的。 - 用法:
<child-component @custom-event="handleCustomEvent"></child-component>
15. v-bind:is
- 作用:用于动态地渲染不同的组件或 HTML 元素。
- 用法:
<component v-bind:is="currentComponent"></component>
- 示例:
<div v-bind:is="isButton ? 'button' : 'a'">{{ text }}</div>
16. v-once
- 作用:将元素或组件仅渲染一次,之后不再更新。适用于不需要响应变化的静态内容。
- 用法:
<p v-once>{{ message }}</p>
17. v-memo
- 作用:用于缓存部分模板的渲染输出,提升性能。配合
v-memo
使用的表达式为其依赖的变化条件。 - 用法:
<div v-memo="[user.id]"> <p>{{ user.name }}</p> </div>
18. v-bind.class
和 v-bind.style
- 作用:动态绑定 class 和内联样式。
- 用法:
- 动态 class:
<div v-bind:class="{ active: isActive }"></div> <div :class="[classA, classB]"></div>
- 动态 style:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
- 动态 class:
19. v-bind:key
- 作用:为渲染的元素或组件设置唯一标识,帮助 Vue 在渲染过程中跟踪和复用元素或组件。
- 用法:
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
20. v-bind:ref
- 作用:在模板中为元素或子组件注册引用,可以在 JavaScript 中访问这些引用。
- 用法:
<input v-bind:ref="inputRef">
- 访问引用:
this.$refs.inputRef.focus();
21. v-bind:slot-scope
- 作用:在 2.x 版本中,用于在插槽上定义作用域。3.x 版本改为
v-slot
。 - 用法:
<slot :user="user"></slot>
22. 自定义指令(v-directive
)
- 作用:Vue 允许你定义自己的指令来扩展默认指令的功能。
- 用法:
Vue.directive('focus', { inserted: function (el) { el.focus(); } });
- 在模板中使用:
<input v-focus>
23. v-bind:[attribute]
动态属性
- 作用:允许你根据表达式的值动态绑定 HTML 属性。
- 用法:
<button v-bind:[dynamicAttr]="value">{{ text }}</button>
24. v-on:[event]
动态事件
- 作用:允许你根据表达式的值动态绑定事件。
- 用法:
<button v-on:[dynamicEvent]="handler">{{ text }}</button>