Fantastic Directives and How To Use Them!

Welcome to another edition of A Vue Blog, a blog for beginners to Vue.js from a beginner to Vue.js. Last time we saw how to print Hello World! on to the screen using string interpolation. Let’s move forward and look into directives.

Directives are attributes provided by Vue that can help us apply a special behavior on to our HTML and DOM. They all start with v- which indicates that they are provided by Vue.

We can create our own directives but in this article, we will play with some of the default directives which can be most useful.

v-bind

Let’s try and create a link that takes us to the blog of the creator of Vue.js, Evan You. We will create a property called url inside the data property and try to pass it to the href attribute of the anchor tag using templates.

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
    url: 'https://evanyou.me'
  }
});

<div id="app">
  <a href="{{ url }}">Evan You's blog!</a>
</div>

Then you go ahead and click the link, but it doesn’t take you to the URL. This is because templates don’t work with attributes.

Inorder to use properties inside attributes, we use a directive called v-bind.

<div id="app">
  <a v-bind:href="url">Evan You's blog!</a>
</div>

And now the link takes you to the URL in the data property.

v-once

v-once is a directive which forces a tag to render only once. Now any time the value of message changes, the rerender will not occur.

<div id="app">
  <h1 v-once>{{ message }}</h1>
</div>

You can try to reassign app.message a new value, but the output will not change.

v-text

This directive does what template syntax does. Show the value of a data property.

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

v-html

Vue.js by default escapes HTML. What this means is that if we use templates to print a property that contains HTML, it will get printed as text and not as a tag. This protects the program from XXS attacks.

In case we need to output HTML, we use v-html directive.

<span>{{ htmlToDisplay }}</span>      <!-- <p>Hey fellas!</p> -->
<span v-html="htmlToDisplay"></span>  <!-- Hey fellas! -->

v-model

This directive can be used to create two-way data bindings on form input, select and other elements. It lets us update data properties on user inputs.

<input v-model="message" placeholder="Edit the message">
<p>Message is: {{ message }}</p>

The initial message shown will be ‘Hello World!‘. The input field will also have the same value. When you edit the input field, you will see the same changes getting reflected below.

v-if, v-else and v-else-if

Vue has provided directives for conditional rendering. This helps us to render only when a given condition is satisfied.

<p v-if="showThem">Hey Guys!</p>

The above tag will only get rendered when showThem is true.

v-for

This directive lets us print a list of items.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

let app = new Vue({
  el: '#app',
  data: {
    fruits: [
      'Apple',
      'Orange',
      'Grape'
    ]
  }
});

This will render an unordered list of fruits.

v-on

v-on directive lets us listen to DOM events and execute a piece of code when the event gets triggered.

<div>
  <button v-on:click="count += 1">Increment by 1</button>
  <p>
    The count is: {{ count }}
  </p>
</div>

let app = new Vue({
  el: '#app',
  data: {
    count: 0
  }
});

On every click event on the button, the data property, count gets incremented by 1. We see the change getting reflected below where we display the count.

There are many more ways we can use the v-on directive and we will look at them in the future.

Vue.js instances can not only have data properties. They can also be home to methods. And that’s what we will get into next time!

A blog by Gautham Lal where he documents his journey of learning Vue from the prespective of a Vue Newbie.