What are the most commonly used Directives in Vue.js?

by

Following is the list of most commonly used directives in Vue.js:

  • v-show
  • v-if
  • v-model
  • v-else
  • v-on

In Vue.js, directives are special tokens in the markup that tell the library to do something to a DOM element. Here are some commonly used directives in Vue.js:

  1. v-bind: It binds an attribute to an expression. For example, v-bind:href="url" binds the href attribute of an element to the value of url in the Vue instance’s data.
  2. v-model: It creates a two-way binding on form input elements or components. It automatically syncs the data between the input and the Vue instance.
  3. v-if / v-else-if / v-else: These directives are used for conditional rendering. They conditionally render a block based on the provided expression.
  4. v-for: It renders a list of items based on an array or object. It iterates over the given array or object and renders each item.
  5. v-on: It attaches event listeners to elements. For example, v-on:click="handleClick" listens for a click event on the element and calls the handleClick method.
  6. v-show: It toggles the visibility of an element based on the truthiness of the expression. Unlike v-if, it does not remove the element from the DOM, it just toggles the display CSS property.
  7. v-html: It renders HTML markup inside an element. It is important to be cautious when using v-html as it can lead to XSS vulnerabilities if used with user-generated content.

These are some of the most commonly used directives in Vue.js, but there are more available for specific use cases.