Basic Vue Directives

In our previous lesson we learned how to bind data and render it to our page and we had a quick look at our first directive: v-model.

Vue.js actually gives us a couple more directives that we can use to change how our app renders. In this lesson we will cover most of them, before going into more detail.

We will start with the basic app we created in our first lesson:

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LearnVue Beginner Course | Lesson 2</title>
  </head>

  <body>
    <div id="app">
      <input type="text" v-model="name">

      <p>Hello {{ name }}!</p>
    </div>

    <script src="https://unpkg.com/vue@2.4.1/dist/vue.js"></script>

    <script>
      let app = new Vue({
        el: '#app',
        data: {
          name: 'Bob'
        }
      })
    </script>
  </body>
</html>

v-if

The first new directive we will take a look at is v-if, and we can quickly demonstrate it by just adding one line of code. Let’s change our app so that if the name we enter equals Alice we will try to make a little more conversation than in other cases.

<div id="app">
  <input type="text" v-model="name">

  <p>Hello {{ name }}!</p>
  <p v-if="name === 'Alice'">How are you?</p>
</div>

After making this change and refreshing the page it will look as if nothing has changed. But if we enter Alice in our text input (case sensitive), you will see the new text appear. This works because Vue will evaluate whatever we pass to the v-if directive and only render the element if it evaluates to true. We could also simply bind a variable to it, such as v-if:"foo" and let our app take care of the logic in our script. As long as it evaluates to true or false, it will render accordingly.

v-show

Another directive to accomplish a similar thing is v-show:

<div id="app">
  <input type="text" v-model="name">

  <p>Hello {{ name }}!</p>
  <p v-show="name === 'Alice'">How are you?</p>
</div>

If we change our directive like this and run it you won’t see any difference to v-if. But if you inspect the page in your dev tools and look at what actually gets rendered, you will notice that the two directives have one significant difference: If the expression evaluates to false v-show will render the element with display: none, meaning it will still be rendered and simply be hidden using CSS, whereas v-if won’t render the element at all.

<div id="app">
  <input type="text">
  <p>Hello Bob!</p>
  <p style="display: none;">How are you?</p>
</div>

v-else and v-else-if

Two more directives, which go hand-in-hand with v-if, are v-else and v-else-if. They behave pretty much as you might expect:

<div id="app">
  <input type="text" v-model="name">

  <p>Hello {{ name }}!</p>
  <p v-if="name === 'Alice'">How are you?</p>
  <p v-else-if="name === 'Bob'">Long time no see!</p>
  <p v-else>Nice to meet you.</p>
</div>

Now we will change our greeting based on whether we are talking to Alice or Bob and we will default to saying “nice to meet you” if the input is anything else.

Careful! You can see that it is very easy to change our app’s behaviour using just these simple directives, but it is also important to keep in mind that relying too much on it may cause us to mix a lot of business logic into our view layer that might be better left to our JavaScript code to handle. That way both our HTML templates as well as our app logic will be easier to read and modify later.

v-for

The final directive we will look at in this lesson is v-for and together with the previous directives it is probably one that you will use a lot. v-for basically let’s us loop through a collection and render each of its elements. Let’s say we want to change our app to just greet all of our friends one by one:

<script>
  let app = new Vue({
    el: '#app',
    data: {
      friends: [
        'Alice',
        'Bob',
        'Dave',
        'Monica'
      ]
    }
  })
</script>

We changed our app to remove the name variable and instead created an array of all our friends. Luckily we don’t have too many, so we could just write the HTML to list all of them by hand. But imagine if we were more popular… it would quickly become a lot of work.

That’s where v-for comes in:

<div id="app">
  <ul>
    <li v-for="friend in friends">Hello {{ friend }}!</li>
  </ul>
</div>

This way no matter how many friends we meet, we only have to add them to our array and our loop will take care of rendering them. This also works with more complex objects instead of simple arrays and we will make use of this a lot in later lessons.

In our next lesson we will learn how to handle simple user input.

comments powered by Disqus