Hello folks! Welcome back to a new section of our tutorial on Vue.js. In this tutorial post, we will be studying about Vue.js Directives.
Directives are instructions for VueJS to do things a particular manner. We have already seen directives like v-if, v-show, v-else, v-for, v-model, v-on, v-bind, etc.
In this tutorial guide, we are going to take a look at custom directives. We are going to be creating global directives similar to how we did for components.
Directives are instructions for VueJS to do things a particular manner. We have already seen directives like v-if, v-show, v-else, v-for, v-model, v-on, v-bind, etc.
In this tutorial guide, we are going to take a look at custom directives. We are going to be creating global directives similar to how we did for components.
Syntax
Vue.directive('nameofthedirective', {
bind(e1, binding, vnode) {
}
})
We need to create a directive making use of Vue.directive. It takes the directive name as shown above. Let's consider an example for a better understanding.
Example
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <div v-changestyle>VueJS Directive</div> </div> <script type = "text/javascript"> Vue.directive("changestyle",{ bind(e1,binding, vnode) { console.log(e1); e1.style.color = "red"; e1.style.fontSize = "30px"; } }); var vm = new Vue({ el: '#databinding', data: { }, methods : { }, }); </script> </body> </html>
In this example, we have created a custom directive known as changestyle as shown in the following piece of code.
Vue.directive("changestyle",{ bind(e1,binding, vnode) { console.log(e1); e1.style.color = "red"; e1.style.fontSize = "30px"; } });
We are assigning the following changestyle to a div.
<div v-changestyle>VueJS Directive</div>
If we see in the browser, it'll display the text VueJS Directive in red color and the fontsize is increased to 30px.
Output
We've used the bind method, which is a part of the directive. It takes three arguments e1, the element to which the custom directives need to be used. Binding is like arguements passed to the custom directive, for example v-changestyle = "{color:'green'}", where green is going to be read in the binding argument and vnode is the element, i.e. nodename.
In the next example, we've consoled all the arguments and it shows what details each of them give.
Example
Following below is an example with a value passed to the custom directive.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <div v-changestyle = "{color:'green'}">VueJS Directive</div> </div> <script type = "text/javascript"> Vue.directive("changestyle",{ bind(e1,binding, vnode) { console.log(e1); console.log(binding.value.color); console.log(vnode); e1.style.color=binding.value.color; e1.style.fontSize = "30px"; } }); var vm = new Vue({ el: '#databinding', data: { }, methods : { }, }); </script> </body> </html>
Output
The color of the text is changed to green. Its value is passed using the following piece of code.
<div v-changestyle = "{color:'green'}">VueJS Directive</div> And it is accessed using the following piece of code. Vue.directive("changestyle",{ bind(e1,binding, vnode) { console.log(e1); console.log(binding.value.color); console.log(vnode); e1.style.color=binding.value.color; e1.style.fontSize = "30px"; } });
Filters
Vue.js supports filters that assist with text formatting. It is used along with v-bind and interpolations ({{}}). We need a pipe symbol at the end of the JavaScripth expression for filters.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <input v-model = "name" placeholder = "Enter Name" /><br/> <span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { name : "" }, filters : { countletters : function(value) { return value.length; } } }); </script> </body> </html>
In the above code, we have created a simple filter countletters. It counts the numbers of characters entered in the textbox. To make use of filters, we need to use filter property and define the filter used, by the following piece of code.
filters : { countletters : function(value) { return value.length; } }
We're defining the method countletters and returning the length of string entered.
To use filter in the display, we have used the pipe operator and the name of the filter, that is countletters.
To use filter in the display, we have used the pipe operator and the name of the filter, that is countletters.
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
Output
Following is the display in the browser.
We can also pass arguments to the filter via the following piece of code.
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>
Now, the countletters is going to have three params, i.e. message, a1, and a2.
We can as well pass multiple filters to the interpolation utilizing the following piece of code.
We can as well pass multiple filters to the interpolation utilizing the following piece of code.
<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>
In the filter property countlettersA and countlettersB will be the two methods and the countlettersA will pass the details to countlettersB.
READ: Vue.js | Events
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Routing.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.