Vue.js Directives

Vue.js Directives

Vue directive is an instruction for Vue.js, which helps to do work in a certain way. Vue Directives are like HTML attributes that are included inside the Vue.js templates. All Vue directives are starts with v-, to indicate a special Vue attribute such as v-if, v-else, v-show, v-for, v-modal, v-bind, v-on, etc. We can use the following syntax to create a directive in a Vue.js application.

Syntax:

Vue.directive (‘name of the directive’, {
             Bind (el, binding, vnode) {
             }
             }) 

Example: This example explains how we can use the Vue directive in the application.

Index.Html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Vue.js Directives</title>
     <script src="https://unpkg.com/vue/dist/vue.js"></script> 
   </head>
   <body>
     <div id="app">
       <div v-show>Hi! This is Vue.js Directive</div>
    </div>
 </body>
 </html> 

Main.js

import Vue from 'vue'
 import App from './App'
 import router from './router'
 Vue.config.productionTip = false
 Vue.directive("show",{
   bind(e1,binding, vnode) {
      console.log(e1); 
      e1.style.color = "Blue";
      e1.style.fontSize = "40px";
   }
 });
 var vm = new Vue({ 
   el: '#app',
   data: {
   },
   methods : {
   },
 }); 

Output: After executing the above code, we will get output, as shown below:

There are many types of Vue directives, such as filters, multiple clauses, literal directives, and empty directives.

Filters

Vue.js framework supports text formatting filters. It is used in combination with v-bind and interpolations ({{}}). Filters are denoted by a single pipe symbol ( | ) in JavaScript expressions.

Example: This example explains how we can use the filter property in the Vue.js directive.

Index.Html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Vue.js Directives</title>
     <script src="https://unpkg.com/vue/dist/vue.js"></script> 
   </head>
   <body>
     <div id="app">
       <input  v-model = "name" placeholder = "Enter Details" /><br/>
       <span style = "font-size:25px;"><b>Total Characters: {{name | countcharacters}}</b></span>
        </div> 
 </body>
 </html> 

Main.js

import Vue from 'vue'
 import App from './App'
 import router from './router'
 Vue.config.productionTip = false
 var vm = new Vue({
   el: '#app',
   data: { 
     name : ""
   },
   filters : {
      countcharacters : function(value) {
         return value.length;
      } 
   } 
   } );

Output: After executing the above code, we will get output, as shown below;

In the above example, we have seen that there is a textbox. When we enter any words or sentences in the textbox, it will count the total number of characters, including with space bar.

Multiple Clause

In a single attribute, we can create multiple bindings of the same directive that are separated by commas. They are bound under the hood as multiple instances of the directive.

Example: The following example helps us to understand how we can use the multiple clauses in a single attribute of Vue.js components.

<div v-on= “
 click: onclick,
 keyup: onkeyup,
 keydown: onkeydown”>
 </div> 

Literal Directives

Some of the Vue directives do not create the data bindings. They only take the attribute value as a literal string, like a v-ref directive.

Example:

<div v-literal-ref= “some string id”> <div>

Empty Directive

Some of the Vue directives don’t expect an attribute value. These Vue directives do something to the component only for once, like a v-pre directive.

Example: By this example, we can understand how we can use the empty directive in the Vue.js components.

<div v-pre>
             <!- - this is an empty directive example - ->
 </div>