Vue Templating Tutorial - Interpolation and Directives

Note: This tutorial is a part of our free course: Vue Tutorial in 2018 - Learn Vue.js by Example

Within the <template></template> section of your Vue components, you're able to write HTML and utilize Vue-specific templating features.

In this tutorial, we're going to take a look at these features, which are grouped into 2 categories:

• Vue Interpolations
• Vue Directives

So, if you're ready to learn, let's get started!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Vue Interpolation

The most basic form of Vue interpolation is text interpolation. It's simply the process of displaying a string that's defined within your component logic.

To give this a try in the project that we've been working on throughout this course, open up the /src/components/Skills.vue file and define a property within props:

<script>
export default {
  name: 'Skills',
  data() {
    return {
      name: 'Coursetro'
    }
  }
}
</script>

Here, we've defined a new property called name with a value of Coursetro. To display this in the template, we use interpolation double curly braces {{ }} with the name of the property inside:

<template>
  <div class="skills">
    {{name}}
  </div>
</template>

If you save the project, you will see Coursetro displayed in the browser.

Simple! If the name property is updated in the component logic, it will automatically render the new value in the template. We'll do that shortly.

Interpolation in Attributes

One important thing to note is that you cannot use the standard {{ }}'s inside of attributes.

To demonstrate how this works, let's create a boolean property and set the disabled attribute of the button based on this property:

<button v-on:click="changeName" v-bind:disabled="btnState">Change Name</button>

..and in the logic:

  data() {
    return {
      name: 'Coursetro',
      btnState: true       // Add this
    }
  },

The button should now be disabled.

So, again, we use the v-bind directive, followed by the name of the attribute, and bind it to a property defined in the component logic.

Expressions in Interpolation

Within interpolation braces, you can place JavaScript expressions. For instance, we can use a ternary (conditional) operator with our btnState boolean:

    <h1 v-once>{{name}}</h1>

    <!-- Add this -->
    {{ btnState ? 'The button is disabled' : 'The button is active'}}

    <button v-on:click="changeName" v-bind:disabled="btnState">Change Name</button>

The result will show that the button is disabled, being that btnState is set as being true in the component logic. 

You can also perform math as well as utilize other javascript functions within interpolation.

Vue Directives

In Vue Templating, you will find yourself utilizing the various directives that exist. 

A Vue Directive is a Vue-specific attribute prefixed by a v-. Each serve a different purpose. 

Here is a list of directives that you can use:

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

I won't go into depth into all of these, but let's try giving v-for a shot. This attribute allows you to iterate through a list.

First, let's create an array of objects in the component logic:

  data() {
    return {
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ]
    }
  },

Next, adjust the template section:

<template>
  <div class="skills">
    <div class="holder">
      <ul>
        <li v-for="(data, index) in skills" :key='index'>{{index}}. {{data.skill}}</li>
      </ul>
    </div>
  </div>
</template>

The result will show you a list of the array items, simple!

Let's try one more: v-if along with v-else for an if else statement in the template:

    <div class="holder">
      <ul>
        <li v-for="(data, index) in skills" :key='index'>{{index}}. {{data.skill}}</li>
      </ul>

      <!-- Add these 2 lines -->
      <p v-if="skills.length >= 1">You have more than 1 skill</p>
      <p v-else>You have less than or equal to 1 skill</p>

    </div>

Simple!

Conclusion

As you can see, templating is fairly straight-forward here in Vue. It's a matter of understanding interpolation along with the various Vue Directives that you can use.

Once you understand these two concepts, you will be well on your way to developing Vue apps.

Next lesson: Vue Styling

Note: This tutorial is a part of our free course: Vue Tutorial in 2018 - Learn Vue.js by Example