A framework aims to provide such features that make the development process easier and faster for the developers. Vue.js is such a feature-enriched JavaScript framework that provides many built-in functions and directives to quickly make the development process. But, there must come some scenarios when you need some functionality that is not available by the framework, so you have to build your own.
In this post, we will learn and take a look at the built-in directives provided by the Vue.js framework, and we will also learn to create and use our own custom-made Vue directive.
Directive
Directives are attributes that you can link with the DOM elements, prefixed by the clause “v-” which helps to know the library that it is a special type of syntax used for performing some tasks. Directives are usually used for direct manipulation of DOM. Some of the most used and famous directives are “v-if”, “v-for”, and “v-show”.
The directives are used to apply effects on DOM elements but reactively. Let’s understand it with an example:
“v-if” Directive
<p v-if= “showText”> You can view the text.</p>
In the above tag, the “v-if” is a directive that will delete or add the paragraph tag “
”, depends on the “showText” variable’s truthiness.
“v-show” Directive
Similarly, we have the “v-show” directive which can perform the same functionality described above:
<p v-show= “showText”> You can view the text.</p>
The subtle difference between “v-if” and “v-show” is that “v-if” does not render the element while loading the page if the bound variable is not true and it loads when the variable becomes true. In contrast, “v-show” will render the element at the web page’s load time but hides it. So, “v-if” is time effective at the page’s load time and time-consuming when the variable gets true. It has to render the whole element while “v-show” is time effective upon the truthiness of the variable time-consuming at the load time of the web page.
Alright! Let’s have a look at a directive that takes the argument.
“v-bind” Directive
Another most widely used directive is “v-bind,” which is used for interacting and updating the HTML attributes. For example, if we want to bind some variable to the “href” attribute of the tag, we can bind the “href” attribute like this:
<a v-bind:href=“url”></a>
“v-on” Directive
Just like the “v-bind” directive, Vue provides a “v-on” directive for binding the variable for listening to the events fired in the DOM. For example, for listening to the Click event and binding some variable to it, the syntax would go like this:
<button v-on:click=“buttonBool=!buttonBool”>Click me!</button>
In the inverted commas, we can provide the expression as well as functions.
Conclusion
We have learned about the directives in Vue and see how to use the directives in Vue.js. We have discussed some of the most used and basic built-in directives of Vue.js, which helps a lot and saves a huge amount of time in the development.
About the author
<img alt="Shehroz Azam" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/03/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg6053f5b106d63.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
