👈 Return to blog

Data binding: Directives 🫰


Vue provides a special attribute called “Directive” the reactive changes to the DOM. In this article will explains what is a Directive and how to use it.

Let’s start🤙🏻

What is a Directive?

As mentioned in the paragraph above, Directive is a special attribute for apply the reactive changes to the DOM. Is recognizable because is preceded by the character v- and Vue provides some Directives like v-if or v-for. It’s possible create custom Directives, but this an advanced concept.


<a v-bind:href="url">Follow me on GitHub</a>

In the example above, the v-bind directive takes href as an argument and is associated with a JavaScript value, in this case a url variable. The structure is:

When the url changes, thanks to v-bind, Vue will apply the relative changes to the DOM.

Dynamic Arguments

It also possible use the power of JavaScript and use a dynamic expression as argument in this way:

<a v-bind:[dynamicArgument]="url">Click here!</a>

the argument is wrapped by square brackets and it’s a JavaScript expression. Dynamic arguments are expected to evaluate to a string, with the exception of null. The special value null can be used to explicitly remove the binding.

You have to keep in mind that certain characters such as spaces and quotes, are invalid inside HTML attribute names.

<a v-bind:["link" + dynamicArgument]="url">Click here!</a>

This example above is invalid.


There are some Directives, for example v-on, that have another attribute: Modifier. They are are special postfixes denoted by a dot which indicate that a directive should be bound in some special way.

For example, it’s possible to use .prevent on v-on:submit, and it will indicate to call event.preventDefault() on the triggered event.

<form v-on:submit.prevent="onSubmit"></form>


There are another to declare v-bind and v-on, shorthand way:

<a :href="url">Follow me on GitHub</a>
<form @submit.prevent="onSubmit"></form>


Directives are a very important feature of Vue that allow you to manipulate data dynamically. For this reason it is essential to know in depth. And now…

Happy coding!✨