YouTip

Vue.js comes with multiple built-in directives for adding specific reactive behaviors or performing DOM operations 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 an element's textContent, similar to interpolation {{ }}, but one-way binding.
v-html	<div v-html="htmlContent"></div>	Updates an element's innerHTML, used for outputting HTML content.
v-model	<input v-model="value">	Creates two-way data binding on form input elements, synchronizing input fields with data properties.
v-show	<div v-show="isVisible"></div>	Toggles the visibility of an element based on the truthiness of an expression using CSS display.
v-if	<p v-if="isVisible">Visible</p>	Renders an element conditionally based on the truthiness of an expression; removes the element from the DOM when false.
v-else	<p v-if="isVisible">Visible</p><p v-else>Not Visible</p>	Supplementary directive to v-if, used to display alternative 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 after v-if and v-else for multi-condition checks.
v-for	<li v-for="(item, index) in items" :key="index">{{ item }}</li>	Iterates over each element in an array or object to generate a corresponding number of elements.
v-on	<button v-on:click="handleClick">Click me</button>	Binds event listeners to listen for DOM events, can be shortened to @.
v-bind	<img v-bind:src="imageSrc">	Dynamically binds HTML attributes, can be shortened to :.
v-slot	<template v-slot:header><h2>Header</h2></template>	Syntax for named slots, provides positions for inserting content into child components.
v-pre	<div v-pre>{{ message }}</div>	Skips compilation for this element and all its children, used to display raw Mustache tags.
v-cloak	{ display: none; }	Hides template content before Vue instance compilation is complete to prevent displaying uncompiled Mustache tags.
v-once	<p v-once>{{ message }}</p>	Renders an element and component only once, does not update upon subsequent data changes.
v-memo	<div v-memo="[valueA, valueB]"> ... </div>	Caches a subtree of a template. If valueA and valueB remain unchanged during re-rendering, all updates to this <div> and its children will be skipped. In fact, even virtual DOM vnode creation will be skipped since a cached copy of the subtree can be reused.

v-text

• Usage: <p v-text="message"></p>
• Description: Updates an element's textContent, similar to interpolation {{ }}, but one-way binding. Can be used to set plain text content of an element.

Example

Example

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

v-html

• Usage: <div v-html="htmlContent"></div>
• Description: Updates an element's innerHTML, used for outputting HTML content. Security should be considered to avoid XSS attacks.

Example

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, supports various form control types.

Example

Example

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

v-show

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

Example

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: Renders an element conditionally based on the truthiness of an expression. v-else and v-else-if are supplementary directives to v-if for multi-condition checks.

Example

Visible

Not Visible

Example

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

v-for

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

Example

• {{ item }}

Example

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

v-on (@)

• Usage: <button v-on:click="handleClick">Click me</button>
• Description: Binds event listeners to listen for DOM events, can be shortened to @. Supports modifiers and dynamic event names.

Example

Click me

Example

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

v-bind ( : )

• Usage: <img v-bind:src="imageSrc">
• Description: Dynamically binds HTML attributes, can be shortened to :. Used to dynamically set element attributes like src, href, etc.

Example

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, provides positions for inserting content into child components for custom component content distribution.

Example

Header Content

Footer Content

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 compilation for this element and all its children, used to display raw Mustache tags, preventing Vue from compiling content.

Example

Example

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

v-cloak

• Usage: { display: none; }
• Description: Hides template content before Vue instance compilation is complete to prevent displaying uncompiled Mustache tags.

Example

Example

{display:none;}

Example

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

v-once

• Usage: <p v-once>{{ message }}</p>
• Description: Renders an element and component only once, does not update upon subsequent data changes, used for static content or rarely updated content.

Example

{{ message }}

Example

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