Skip to main content

Understanding Vue.js Directives

Vue.js is a versatile and performant JavaScript framework used for building user interfaces. One of the most powerful features in Vue.js is its system of directives. Directives are special attributes starting with v- that you can use to apply reactive behavior to the rendered DOM. In this tutorial, we'll explore the most commonly used Vue.js directives.

Vue.js Directives​

Directives in Vue.js are prefixed with v- to indicate that they are special attributes provided by Vue.js. They apply special reactive behavior to the rendered DOM.

Below are the common directives in Vue.js:

  1. v-model: This directive creates a two-way data binding on a form input element or a component.
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
  1. v-if: This directive conditionally renders a block. The block will only be rendered if the directive’s expression returns a truthy value.
<p v-if="seen">Now you see me</p>
  1. v-for: This directive is used for rendering a list of items using the data from an Array.
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
  1. v-on: Attaches an event listener to an element. The event type is denoted by the argument. 
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
  1. v-bind: Dynamically binds one or more attributes, or a component prop to an expression.
<button v-bind:disabled="isButtonDisabled">Button</button>

Understanding How Directives Work​

At a high level, directives are functions that are run when Vue.js compiles your templates into Virtual DOM render functions. When Vue.js updates the component with new state, it runs all directives to update the DOM with the new state.

Most directives change the appearance or behavior of the elements they are added to. However, there are a few directives that have a special purpose and can only be used in specific situations. These include v-else, v-else-if, and v-pre.

Conclusion​

In this tutorial, we've covered the basics of Vue.js directives. We've learned about the most common directives, such as v-model, v-if, v-for, v-on, and v-bind, and how they work. By mastering these directives, you'll be able to build dynamic and interactive web applications using Vue.js. As always, the best way to learn is by doing, so try to use these directives in your Vue.js projects and see how they can help improve your applications.