Directives in Vue.js: Usage and Examples

Directives in Vue.js allow you to apply special behaviors to elements in the DOM. They are prefixed with the v- syntax and are used to manipulate the DOM, handle events, conditionally render elements, and more. Vue.js provides several built-in directives such as v-if, v-for, v-bind, and v-on, which cover a wide range of common use cases.

Here are some common directives in Vue.js:


1. v-if Directive: This directive is used to conditionally render an element based on a condition.


<div v-if="isShow">This element is only displayed if isShow is true.</div>


2. v-for Directive: This directive is used to iterate over an array or an object and create corresponding elements.


  <li v-for="item in items">{{ item }}</li>


3. v-bind Directive: This directive is used to bind the value of an expression to an attribute or a property of an element.


<img v-bind:src="imageUrl">


4. v-on Directive: This directive is used to listen to and handle events on an element.


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


5. v-model Directive: This directive creates a two-way binding between an input element and a data property.


<input v-model="message">


These are just some basic directives in Vue.js. You can also create your own custom directives to perform specific behaviors in your Vue.js application.