3. Introduction to Vue directives

Today we will be touching the surface of what Vue directives are all about.

First things first. What are directives? These are special instructions that change the behavior of the HTML elements when attached to them. In other words, these are special attributes attached to the HTML elements which change the behavior and provide control over the DOM based on the value of its expression.

All Vue directives are prefixed with v- . The prefix serves the following purposes,

Indicates that it is a special attribute belonging to Vue
Helps in keeping the syntax consistent
Provides readability to developers

Vue comes with a few built-in directives. Note that we can write our own custom directives which we will see later on. These directives can help us in many situations.

Some examples are,

One-way and two-way binding: v-bind and v-model respectively
Listening to DOM events: v-on
Conditional rendering: v-if, v-else, v-for
Interpolations: v-once, v-html, v-text

In our tutorial series, we will be working with all these directives in detail. For now, let us look at the working of v-once with a code example to get a feel of how directives work in general.

Scenario:

Display a heading and
Display a paragraph with a greeting message such as “Hi!”

Index.html

<html>
  <head>
    <title>Hello Vue!</title>
    <!-- including Vue with development version CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <p>Calling the greet function - {{ greet() }}!</p>
    </div>
    <!-- including index.js file-->
    <script src="index.js"></script>
  </body>
</html>

Index.js

var app = new Vue({
  el: "#app",
  data: {
    message: "Hi everyone!"
  },
  methods: {
    greet() {
      this.message = "Hi!"
      return this.message;
    }
  }
});

Can you guess the output?

Both the heading and the value returned by the greet() function will be “Hi!” because all the occurrences of message will be re-rendered once its value is changed. That’s the default behavior.

But there can be situations where you might want to display the initial value of a property even though it changes later on. This is where directives come into place. Here in our scenario, we wish to display the initial value of the message property, “Hi everyone!” as the heading. So, by adding the directive v-once to the <h1> element, all the content inside of that element will be rendered only once. It will not be updated when it is changed later on by the greet() method in the <p> element.

As always, all the code files are available in the GitHub repo. Please feel free to fork your own copy to experiment with v-once directive. Don’t forget to let your imagination run wild. See you soon!

Scenario:

Index.html

Index.js

Next Post

Leave A Comment Cancel reply