现在位置: 首页 > 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-ifv-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,类似于插值 {{ }},但是是单向绑定。可以用于设置元素的纯文本内容。

实例

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

实例

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

v-html

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

实例

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

实例

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

v-model

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

实例

<input type="text" v-model="message">

实例

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-elsev-else-ifv-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)来提高渲染效率。

实例

<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

实例

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 属性,可以简写为 :。用于动态设置元素的属性,例如 srchref 等。

实例

<img v-bind:src="imageSrc" alt="Vue Logo">

实例

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!'
    };
}