VUE常用指令

Vue.js 提供了一系列内置指令,以下是它们的列表及示例:

• v-text: 更新元素的 textContent。与 Mustache 插值 {{ }} 类似,但是 v-text 不会将输入解析为 HTML。

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

• v-html: 更新元素的 innerHTML。会将输入解析为 HTML,可能会存在安全隐患,需要谨慎使用。

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

• v-show: 根据表达式的值切换元素的显示/隐藏。原理是修改元素的 display CSS 属性。适用于频繁切换显示/隐藏的场景。

<div v-show="isVisible">这个元素会根据 isVisible 的值显示或隐藏</div>

• v-if、v-else-if、v-else: 根据表达式的值来有条件地渲染元素。原理是直接操作 DOM,在条件不满足时元素不会被渲染。适用于需要根据条件完全移除/插入元素的场景。

<div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else>不是 A 也不是 B</div>

• v-for: 基于源数据多次渲染元素或模板块。常用于遍历数组、对象等数据结构。需要提供 key 属性作为唯一标识,以提高性能。

<div v-for="item in items" :key="item.id">{{ item.name }}</div>

• v-on: 绑定事件监听器。可以使用事件修饰符和按键修饰符。支持动态事件名称。

<button v-on:click="handleClick">点击我</button>

• v-bind: 动态地绑定一个或多个属性。可以用于绑定 class 和 style。支持动态属性名称。

<div :class="{ 'active': isActive }"></div>

• v-model: 在表单控件或组件上创建双向数据绑定。可以用于 input、textarea、select 等表单元素。支持修饰符,如 .lazy、.number、.trim。

<input v-model="message" placeholder="编辑我...">

• v-slot: 为组件的插槽定义的特殊语法糖。可以用于具名插槽和作用域插槽。

<my-component> <template #default="{ message }"> <div>{{ message }}</div> </template> </my-component>

• v-pre: 跳过这个元素和它的子元素的编译过程。可以用于显示原始 Mustache 标签。

<span v-pre>{{ this will not be compiled }}</span>

• v-cloak: 这个指令保持在元素上直到关联实例结束编译。可以与 CSS 规则一起使用,隐藏未编译的 Mustache 标签。

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

这些只是 Vue.js 中最常用的指令,实际上 Vue.js 还提供了更多的内置指令和自定义指令的功能,可以根据具体需求进行扩展和使用。