Understanding Directives

Directives are a direct take away from AngularJS. If you’ve worked with AngularJS before then directives are second nature.

Vue.js comes pre-packaged with a few directives that help you render data to your view. You can create custom directives, however, these pre-packaged directives are the only directives you’ll need about 99% of the time. Although, it’s nice to have the option.

Below is a list of directives that can be used with Vue.js out-of-the-box. All directives are prefixed with v-.

• v-for*
• v-show*
• v-if*
• v-else*
• v-else-if*
• v-text
• v-html
• v-on*
• v-bind*
• v-model*
• v-pre
• v-cloak
• v-once

Note: Starred (*) directives are the more common directives you will most likely use.

The v-for Directive

The v-for directive is used to iterate through data in your view. In vanilla JavaScript, you would use a loop of some kind like forEach to iterate through data. However, in your view, there will be plenty of times where you want to display text for each item in an array.

app.js

var vm = new Vue({
  el: '#app',
  data: {
    bands: ['Green Day', 'Nirvana', 'Foo Fighters', 'The Beatles', 'Blink-182', 'Pearl Jam'],
  },
});

In this example, we have an array called bands that has a total of six bands. To display each band as a list item in an unordered list, you can use v-for to iterate through this data.

index.html

<div id="app">
  <ul>
    <li v-for="band in bands">{{ band }}</li>
  </ul>
</div>

You should see an unordered list with all six of the rock bands:

• Green Day
• Nirvana
• Foo Fighters
• The Beatles
• Blink-182
• Pearl Jam

The v-show Directive

The v-show directive is pretty straightforward; it displays an element based on a condition.

app.js

var vm = new Vue({
  el: '#app',
  data: {
    airports: [
      {
        code: 'CVG',
        country: 'USA',
      },
      {
        code: 'YYZ',
        country: 'Canada',
      },
      {
        code: 'SEA',
        country: 'USA',
      },
      {
        code: 'CDG',
        country: 'France',
      },
      {
        code: 'DCA',
        country: 'USA',
      },
    ],
  },
});

In this example, we use the string "Airport {{ code }} is in the United States." to display if the country of that airport is equal to “USA.”

index.html

<div id="app">
  <div class="airport" v-for="airport in airports">
    <p>{{ airport.code }}<p>
    <p v-show="airport.country === 'USA'">Airport <strong>{{ airport.code }}</strong> is in the United States.</p>
  </div>
</div>

The string should only display for airports CVG (Cincinnati, OH), SEA (Seattle, WA), and DCA (Washington, D.C.).

Note: The v-show directive will still render every paragraph to the DOM even if the condition is not met. If the condition is not met, the paragraph will just be hidden.

The v-if, v-else, v-else-if Directives

The v-if, v-else, v-else-if directives are some of the most useful and common directives, in addition to v-for. These directives will render the element if a condition is met. These are similar to v-show and when checked with v-if, the element will not even render to the page. This the preferred way to conditionally render something to your view. Plus, you can use v-else and v-else-if in conjunction with it.

If you use the airport example from above, we have more information based on the airport’s country.

index.html

<div id="app">
  <div class="airport" v-for="airport in airports">
    <p>{{ airport.code }}<p>
    <p>
      Airport <strong>{{ airport.code }}</strong>
      <span v-if="airport.country === 'USA'">is in the United States.</span>
      <span v-else-if="airport.country === 'Canada'">is in Canada.</span>
      <span v-else>is in France.</span>
    </p>
  </div>
</div>

The v-on Directive

This directive declares a method to run on a specific event such as click, keyup, or submit, to name a few. The event and the directive are separated by a colon (:). The directive can accept a function or a string that is mapped to the function name in the methods property.

index.html

<div id="app">
  <button v-on:click="showAlert">Show Alert</button>
</div>

app.js

var vm = new Vue({
  el: '#app',
  methods: {
    showAlert() {
      alert('This was triggered by using the v-on directive!');
    },
  },
});

Using the Shorthand Syntax

You can also use the shorthand syntax for v-on, which is the “at sign” (@). Every example in this book moving forward will be using the shorthand syntax.

<div id="app">
  <button @click="showAlert">Show Alert</button>
</div>

The v-bind Directive

The v-bind directive is used when you need to “bind” or connect your view to some data in your Vue instance or component. You may be trying to add an alt tag to an img with a description from your instance’s data. If so, you need to bind that attribute to the data.

There will be many times when you’ll need to bind an attribute to data. As stated above, one of these examples might be giving an img an alt attribute or even a src.

To bind that attribute to data, use the v-bind: directive.

index.html

<div id="app">
  <img v-bind:src="imageSrc" v-bind:alt="altText">
</div>

app.js

var vm = new Vue({
  el: '#app',
  data: {
    imageSrc: 'path/to/image.jpg',
    altText: 'The Cincinnati Skyline as seen from Newport, Kentucky.',
  },
});

Vue.js comes pre-shipped with a shorthand syntax for v-bind: the colon (:). Every example in this book moving forward will be using the shorthand syntax.

Using the Shorthand Syntax

<div id="app">
  <img :src="imageSrc" :alt="altText">
</div>

That’s a lot easier to read!