Vue3 Built-in Directives

Vue.js has several built-in directives (Directives) for adding specific reactive behavior or manipulating the DOM in templates.

The following are commonly used built-in directives in Vue.js:

Directive Usage Example Description
v-text <p v-text="message"></p> Updates the element'stextContent, similar to interpolation{{ }}, but it is one-way binding.
v-html <div v-html="htmlContent"></div> Updates the element'sinnerHTML, used to output HTML.
v-model <input v-model="value"> Creates two-way data binding on form control elements, synchronizing input fields with data properties.
v-show <div v-show="isVisible"></div> Toggles the display and visibility of an element based on the truthiness of an expression, using CSS'sdisplayproperty.
v-if <p v-if="isVisible">Visible</p> Conditionally renders an element based on the truthiness of an expression; when the condition is false, the element is removed from the DOM.
v-else <p v-if="isVisible">Visible</p><p v-else>Not Visible</p> v-ifA supplementary directive for displaying fallback content when the condition is false.
v-else-if <template v-if="type === 'A'"><p>Type A</p></template><template v-else-if="type === 'B'"><p>Type B</p></template> Used consecutively afterv-ifandv-elseafter, for multi-condition judgment.
v-for <li v-for="(item, index) in items" :key="index">{{ item }}</li> Iterates over each element of an array or object, generating a corresponding number of elements.
v-on <button v-on:click="handleClick">Click me</button> Binds an event listener to listen to DOM events; can be abbreviated as@。
v-bind <img v-bind:src="imageSrc.html"> Dynamically binds HTML attributes; can be abbreviated as:。
v-slot <template v-slot:header><h2>Header</h2></template> Syntax for named slots, providing a location to insert child component content.
v-pre <div v-pre>{{ message }}</div> Skips the compilation process for this element and all its child elements, used to display raw Mustache tags.
v-cloak [v-cloak] { display: none; } Hides template content until the Vue instance has finished compiling, preventing uncompiled Mustache tags from being displayed.
v-once <p v-once>{{ message }}</p> Renders the element and component only once, and will not update with subsequent data changes.
v-memo 
<div v-memo="[valueA, valueB]">
  ...
</div>

Caches a subtree of the template.

When the component re-renders, ifvalueAandvalueBall remain unchanged, this<div>and all updates to its children will be skipped. In fact, even the creation of virtual DOM vnodes will be skipped, because a cached copy of the subtree can be reused.

v-text

  • Usage: <p v-text="message"></p>
  • Description: Updates the element'stextContent, similar to interpolation{{ }}, but it is one-way binding. It can be used to set the plain text content of an element.

Example

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

Example

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

v-html

  • Usage: <div v-html="htmlContent"></div>
  • Description: Updates the element'sinnerHTML, used to output content containing HTML structure. Security should be noted to avoid XSS attacks.

Example

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

Example

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

v-model

  • Usage: <input v-model="value">
  • Description: Creates two-way data binding on form control elements, synchronizing input fields with data properties, and supports multiple form control types.

Example

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

Example

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

v-show

  • Usage: <div v-show="isVisible"></div>
  • Description: Toggles the display and visibility of an element based on the truthiness of an expression, using CSS'sdisplayproperty to control the element's visibility.

Example

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

Example

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

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

  • Usage: <p v-if="isVisible">Visible</p><p v-else>Not Visible</p>
  • Description: Conditionally renders an element based on the truthiness of an expression.v-elseandv-else-ifYesv-ifA supplementary directive for multi-condition judgment.

Example

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

Example

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

v-for

  • Usage: <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  • Description: Iterates over each element of an array or object, generating a corresponding number of elements, and supports specifying a key to improve rendering efficiency.

Example

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

Example

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

v-on (@)

  • Usage: <button v-on:click="handleClick">Click me</button>
  • Description: Binds an event listener to listen to DOM events; can be abbreviated as@. Supports modifiers and dynamic event names.

Example

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

Example

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

v-bind ( : )

  • Usage: <img v-bind:src="imageSrc.html">
  • Description: Dynamically binds HTML attributes; can be abbreviated as:. Used to dynamically set element attributes, for examplesrc、hrefetc.

Example

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

Example

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

v-slot

  • Usage: <template v-slot:header><h2>Header</h2></template>
  • Description: Syntax for named slots, providing a location to insert child component content, used for content distribution in custom components.

Example

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

Example

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

v-pre

  • Usage: <div v-pre>{{ message }}</div>
  • Description: Skips the compilation process for this element and all its child elements, used to display raw Mustache tags and prevent Vue from compiling the content.

Example

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

Example

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

v-cloak

  • Usage: [v-cloak] { display: none; }
  • Description: Hides template content until the Vue instance has finished compiling, preventing uncompiled Mustache tags from being displayed.

Example

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

Example

[v-cloak] { display: none; }

Example

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

v-once

  • Usage: <p v-once>{{ message }}</p>
  • Description: Renders the element and component only once, and will not update with subsequent data changes; used for static content or content that is not frequently updated.

Example

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

Example

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