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>