Vue

What is a Vue Directive, and how to use it?


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 “<p>”, 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 <a> 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

Shehroz Azam

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.