Understanding Vue Directives

Directives are a huge part of Vue, so it is important that we understand them as developers. Not only are they an essential part of the Vue framework out of the box, but by understanding them more fully we can create more powerful functionality in our apps.

What is a directive?

So what is a directive in Vue? At the core, a directive is a "prefixed HTML attribute that tells the library to do something to a DOM element.*

In plain English, it is a piece of code that we use to tell Vue to do something with our markup. A couple of the most used directives in Vue are the v-bind and the v-on directives.

You'll notice we mentioned in the highlighted text that in Vue a directive must be prefixed. The default prefix for directives is the letter 'v' followed by the directive name/id.

Parts of a directive

Expression

Directives can take in a value. Take this code for example:

<div v-text="message"></div>

Here we are using the v-text directive. The expression we are using is message, which is referring to a property on the Vue instance.

In addition to binding to just a single value, directives can take in an expression.

<div v-text="'hello ' + user.firstName + ' ' + user.lastName"></div>

In the above code, we have passed in an entire string that depends on multiple properties of the Vue instance. Whenever one of those properties changes, the text will be updated. To prevent using too much logic inside of directive expressions, we are limited to using one statement only. That might seem like an annoyance, but realistically we have better ways of handling complex logic, like computed properties.

Argument

Arguments in Vue directives are ways we can adjust the functionality of a particular directive. An argument is passed to a directive after the :. For example, with the v-on directive we pass an argument telling Vue which event to listen to. Eg: v-on:click.

Modifiers

Directives can also have modifiers to add more functionality changes. Again as an example, we can add the stop modifier to the v-on directive to stop event propagation. Vue has other built in modifiers that can be really helpful. Some of the more helpful ones are on the keyup event. See below for an example.

<input v-on:keyup.enter="submit">

The above code listens to the keyup event, but only on the 'Enter' key. This makes things really easy to use and prevents the developer from needing to write their own logic to handle this common problem.