Introduction to Directives

Now that we have covered string interpolation and methods, it’s time to talk about something called directives. Directives apply special reactive behavior to the rendered DOM. You will see what this means during the next couple of articles, but the easiest way to wrap your head around it is to see an example.

Suppose that I want to link to my blog and I have the URL stored within the data object on a Vue instance. I have prepared the Vue instance in advance, because it contains nothing that you haven’t seen before.

new Vue({
	el: '#app',
	data: {
		blogUrl: 'http://codingexplained.com'
	}
});

I have already created an empty link within the template.

<div id="app">
  <a href="">Visit my Blog</a>
</div>

So how can we make the link point to the URL stored within the blogUrl data property? Could we use string interpolation as we have seen before? Well, let’s try.

<div id="app">
  <a href="{{ blogUrl }}">Visit my Blog</a>
</div>

Running this code and hovering over the link, we can see that things do not work as expected. The string interpolation syntax is output, and the browser URL encodes it. This is because we cannot use string interpolation in any HTML attributes.

Instead, we can use a directive named v-bind.

<div id="app">
  <a v-bind>Visit my Blog</a>
</div>

The v-bind directive binds attributes to an expression. Right now we haven’t specified the attribute nor the expression, so let’s do that. After the name of the directive, we add a colon followed by the name of the HTML attribute that we would like to bind to. In this case, we are interested in the href attribute.

<div id="app">
  <a v-bind:href>Visit my Blog</a>
</div>

The last missing piece is the expression. In this case, we just need to access the blogUrl data property, so all we need to do, is to add an equals sign, followed by the expression enclosed within quotation marks.

<div id="app">
  <a v-bind:href="blogUrl">Visit my Blog</a>
</div>

If I run the code again, we can see that it now works as intended.

To recap, the syntax for directives consists of the name of the directive, a colon, an argument to the directive, and an expression. The reason I said that the second part of the syntax is an argument to the directive rather than an HTML attribute name, is that the attribute name is actually an argument to the v-bind directive. So this syntax is used for directives in general, and the v-bind directive takes an argument which is the name of the HTML attribute to bind to. Not all directives take arguments as we will see in the coming articles. The last part of the directive syntax is the expression. In this case we just referred to a data property, but for other directives, we can also refer to methods.

Now I mentioned earlier that directives apply reactive behavior to the DOM. In this case, the HTML element in the DOM is updated automatically whenever the value of our blogUrl data property changes. I am going to show this to you in one of the next articles, so for now you will just have to take my word for it. But what we are basically telling Vue.js in this example, is to keep the href attribute up-to-date with the blogUrl property on the Vue instance.

Directives are – as you have probably noticed – prefixed by “v” and a hyphen to indicate that they are special attributes that Vue.js will recognize. In fact, it is possible to write your own directives, which is something that we will take a look at later.

In this video, you have been introduced to the concept of Vue.js directives and its general syntax, with the v-bind directive being an example hereof. Don’t worry if you didn’t understand everything covered in this video, as we will be working a lot with directives throughout this course. In the next videos, we will be taking a look at more Vue directives, but first, it’s time to practice what we have learned so far!