Vue3 内置指令 | 菜鸟教程

Vue.js 内置了多个指令（Directives），用于在模板中添加特定的响应式行为或操作 DOM。

以下是 Vue.js 中常用的内置指令：

指令	用法示例	说明
v-text	`<p v-text="message"></p>`	更新元素的 `textContent`，类似于插值 `{{ }}`，但是是单向绑定。
v-html	`<div v-html="htmlContent"></div>`	更新元素的 `innerHTML`，用于输出 HTML。
v-model	`<input v-model="value">`	在表单控件元素上创建双向数据绑定，将输入字段与数据属性同步。
v-show	`<div v-show="isVisible"></div>`	根据表达式的真假切换元素的显示与隐藏，使用 CSS 的 `display` 属性。
v-if	`<p v-if="isVisible">Visible</p>`	根据表达式的真假条件性地渲染元素，当条件为假时元素将从 DOM 中移除。
v-else	`<p v-if="isVisible">Visible</p><p v-else>Not Visible</p>`	`v-if` 的补充指令，用于显示条件为假时的备用内容。
v-else-if	`<template v-if="type === 'A'"><p>Type A</p></template><template v-else-if="type === 'B'"><p>Type B</p></template>`	连续使用于 `v-if` 和 `v-else` 之后，用于多条件判断。
v-for	`<li v-for="(item, index) in items" :key="index">{{ item }}</li>`	遍历数组或对象的每个元素，生成相应数量的元素。
v-on	`<button v-on:click="handleClick">Click me</button>`	绑定事件监听器，用于监听 DOM 事件，可以简写为 `@`。
v-bind	`<img v-bind:src="imageSrc">`	动态绑定 HTML 属性，可以简写为 `:`。
v-slot	`<template v-slot:header><h2>Header</h2></template>`	用于具名插槽的语法，提供插入子组件内容的位置。
v-pre	`<div v-pre>{{ message }}</div>`	跳过这个元素和它的所有子元素的编译过程，用于显示原始 Mustache 标签。
v-cloak	`[v-cloak] { display: none; }`	在 Vue 实例编译完成前隐藏模板内容，避免显示未编译的 Mustache 标签。
v-once	`<p v-once>{{ message }}</p>`	只渲染元素和组件一次，不会随后续数据变化而更新。

v-text

用法: <p v-text="message"></p>
说明: 更新元素的 textContent，类似于插值 {{ }}，但是是单向绑定。可以用于设置元素的纯文本内容。

实例

实例

data() {
return {
message: 'Hello, Vue!'
};
}

v-html

用法: <div v-html="htmlContent"></div>
说明: 更新元素的 innerHTML，用于输出包含 HTML 结构的内容。需要注意安全性，避免 XSS 攻击。

实例

实例

data() {
return {
htmlContent: '<strong>Vue.js</strong> is awesome!'
};
}

v-model

用法: <input v-model="value">
说明: 在表单控件元素上创建双向数据绑定，将输入字段与数据属性同步，支持多种表单控件类型。

实例

实例

data() {
return {
message: ''
};
}

v-show

用法: <div v-show="isVisible"></div>
说明: 根据表达式的真假切换元素的显示与隐藏，使用 CSS 的 display 属性控制元素的可见性。

实例

<div v-show="isVisible">Visible when true</div>

实例

data() {
return {
isVisible: true
};
}

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

用法: <p v-if="isVisible">Visible</p><p v-else>Not Visible</p>
说明: 根据表达式的真假条件性地渲染元素。v-else 和 v-else-if 是 v-if 的补充指令，用于多条件判断。

实例

<p v-if="isVisible">Visible</p>
<p v-else>Not Visible</p>

实例

data() {
return {
isVisible: true
};
}

v-for

用法: <li v-for="(item, index) in items" :key="index">{{ item }}</li>
说明: 遍历数组或对象的每个元素，生成相应数量的元素，支持指定键（key）来提高渲染效率。

实例

实例

data() {
return {
items: ['Apple', 'Banana', 'Cherry']
};
}

v-on (@)

用法: <button v-on:click="handleClick">Click me</button>
说明: 绑定事件监听器，用于监听 DOM 事件，可以简写为 @。支持修饰符和动态事件名。

实例

<button v-on:click="handleClick">Click me</button>

实例

methods: {
handleClick() {
alert('Button clicked');
}
}

v-bind ( : )

用法: <img v-bind:src="imageSrc">
说明: 动态绑定 HTML 属性，可以简写为 :。用于动态设置元素的属性，例如 src、href 等。

实例

实例

data() {
return {
imageSrc: 'https://vuejs.org/images/logo.png'
};
}

v-slot

用法: <template v-slot:header><h2>Header</h2></template>
说明: 用于具名插槽的语法，提供插入子组件内容的位置，用于自定义组件的内容分发。

实例

<BaseLayout>
<template v-slot:header>
<h2>Header Content</h2>
</template>
<template v-slot:footer>
<p>Footer Content</p>
</template>
</BaseLayout>

实例

// BaseLayout 组件定义
Vue.component('BaseLayout', {
template: `
<div>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>
`
});

v-pre

用法: <div v-pre>{{ message }}</div>
说明: 跳过这个元素及其所有子元素的编译过程，用于显示原始 Mustache 标签，防止 Vue 编译内容。

实例

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

实例

data() {
return {
message: 'Hello, Vue!'
};
}

v-cloak

用法: [v-cloak] { display: none; }
说明: 在 Vue 实例编译完成前隐藏模板内容，避免显示未编译的 Mustache 标签。

实例

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

实例

[v-cloak] { display: none; }

实例

data() {
return {
message: 'Hello, Vue!'
};
}

v-once

用法: <p v-once>{{ message }}</p>
说明: 只渲染元素和组件一次，不会随后续数据变化而更新，用于静态内容或不经常更新的内容。

实例

<p v-once>{{ message }}</p>

实例

data() {
return {
message: 'Hello, Vue!'
};
}

返回顶部