Vue Directives

In our last tutorial, we discussed Vue Interpolations. In this article, we will learn what directives are.

The directives’ purpose is to give effect to a specific DOM when a certain value changes. It is an attribute with the prefix of v-  example. This is the one we have used from our previous demo application.


In the above example, we have used the v-if directive to hide a specific table when a condition is met.

Directives can also handle an argument and applies an attribute when a condition is met. A similar example is used from the previous tutorial.


The above works depending on the value of the argument you have set. The exception for directives is the v-for. We are going to learn everything about it as we move forward with our tutorials. The other type of directive is the modifier and its primary purpose is to inject a new treatment on a specific event.


The above code is the perfect example of modifier directive that can be identified when you use a dot which denotes a new treatment in our click event. In the above code, the click function will stop once you click the button similar to event.preventDefault in javascript native way.

On the next article, we will tackle Filters.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.