30 Days of Vue

Vue Directives

 

This post is part of the series 30 Days of Vue.

In this series, we're starting from the very basics and walk through everything you need to know to get started with Vue. If you've ever wanted to learn Vue, this is the place to start!

Vue Directives

The last article was a little heavy on discussion. In today's article, we’ll dive into more code examples by addressing some important native Vue directives.

A Vue directive is essentially a special type of command that can be added to HTML content and often appears as a prefixed HTML attribute. We’ll first revisit the v-on directive since we’ve already used it in one of the earlier articles.

Event Handling with v-on

The v-on directive can be used to create event listeners within the DOM to enable us to do something when a particular event happens.

In article #2, the v-on directive was used to call an instance changeGreeting() method when a button was clicked:

<button v-on:click="changeGreeting">
  Change Greeting
</button>

Instead of triggering a method in the instance, we’re also able to run JavaScript inline in the template:

<button v-on:click="greeting = 'Hi there!'">
  Change Greeting
</button>

Though inline JavaScript works just as well, calling methods bound to the instance is often preferable when intended functionality change gets more complicated.

It's important to keep in mind that the v-on directive can be used with virtually any native DOM event:

<h1 v-on:click="method">Click me!</h1>
<h1 v-on:dblclick="method">Double Click me!</h1>
<form v-on:submit="method">...</form>
<input v-on:keydown="method"
  placeholder="Press down on keys" />
<input v-on:keyup="method"
  placeholder="Release keys" />
<!-- ... -->

Here’s a code sample that shows some different event listeners with different expected outcomes:

HTML

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <div id="app">
      <h2>{{ greeting }}</h2>
      <p>{{alertMessage}}</p>
      <button v-on:click="changeGreeting">
        Change Greeting
      </button> 
      <button v-on:dblclick="changeGreeting">
        Double click to change greeting
      </button>
      <input v-on:keyup="alertMessageGreeting"
             placeholder="Type something" />
      <input v-on:keyup.enter="alertEnterGreeting" 
             placeholder="Type and release Enter" />
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>

JS

new Vue({
  el: '#app',
  data: {
    greeting: 'Hello World!',
    alertMessage: ''
  },
  methods: {
    changeGreeting() {
      this.greeting = this.greeting === 'Hello World!' ?
       'What is up!' :
       'Hello World!';
    },
    alertMessageGreeting() {
      this.alertMessage = 'You typed something!';
    },
    alertEnterGreeting() {
      this.alertMessage = 'You typed and pressed Enter!';
    },
  }
});

Live version - https://30dofv-von.surge.sh

From the code sample above, you may have noticed the v-on directive be used on a keyup.enter event. keyup.enter is one of the unique key modifiers Vue provides to allow us to react to events from commonly used keys like the Enter key.

Finally, event handlers usually have an event object that contains details about the event. In the v-on directive, we’re able to access this original event object by explicitly passing in the $event variable:

<h1 v-on:click="method($event)">Click me!</h1>

The v-on directive is essentially what we use to detect and handle events in Vue applications.

Attribute binding with v-bind

The simplest form of data binding in Vue is the Mustache Syntax (i.e. double curly braces) which is used to bind data values on to text content of HTML elements.

In the code samples prepared in the first and second articles, we used the Mustache Syntax to bind greeting, user, and city properties defined in our instance on to the template:

<html>
  <body>
    <div id="app">
      <h2>{{ greeting }}</h2>
      <p>by {{ user }} who lives in {{city}}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>

We’re unable to use the Mustache syntax to bind data to standard HTML attributes like href, id, src, etc. To bind HTML attributes, Vue provides the native v-bind directive.

Here’s an example of using the v-bind directive to bind a data property (named cityImage) to the src attribute of an img element:

HTML

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <div id="app">
      <h2>{{ greeting }}</h2>
      <p>by {{ user }} who lives in {{ city }}</p>
      <img v-bind:src="cityImage" />
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>

JS

new Vue({
  el: '#app',
  data: {
    greeting: 'Hello World!',
    user: 'Hassan Djirdeh',
    city: 'Toronto',
    cityImage: 'https://bit.ly/2SKJPqJ'
  }
});

With the cityImage appropriately bound to a hosted image of Toronto, we’ll be presented with a view of Toronto’s skyline:

Live version - https://30dofv-vbind.surge.sh

Conditional rendering with v-if (or v-show)

Oftentimes, we may find ourselves interested in conditionally rendering content based on the value of an expression. In Vue, we can achieve this with the help of the v-if and v-show directives.

To see an example of conditional rendering, let’s first add a button to our previous example that would allow us to change the city title and image from Toronto to Lagos:

HTML

<html>
  <body>
    <div id="app">
      <h2>{{ greeting }}</h2>
      <p>by {{ user }} who lives in {{ city }}</p>
      <img v-bind:src="cityImage" />
      <button v-on:click="changeCity">
        Change City
      </button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>

JS

new Vue({
  el: '#app',
  data: {
    greeting: 'Hello World!',
    user: 'Hassan Djirdeh',
    city: 'Toronto',
    cityImage: 'https://bit.ly/2SKJPqJ'
  },
  methods: {
    changeCity() {
      if (this.city === 'Toronto') {
        this.city = 'Lagos';
        this.cityImage = 'https://bit.ly/2Rd4gQ3';
      } else {
        this.city = 'Toronto';
        this.cityImage = 'https://bit.ly/2SKJPqJ';
      }
    }
  }
});

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by:

Get started now

Join us on our 30-day journey in Vue. Join thousands of other professional Vue developers and learn one of the most powerful web application development frameworks available today.

No spam ever. Easy to unsubscribe.