Since we’re on the subject of showing and hiding elements, let’s see how we can hide the string interpolation syntax that appears on the page until Vue.js is bootstrapped. Since the string interpolation syntax is simply a part of the HTML as normal text, the browser will render it as such. It will then be displayed for as long as it takes Vue.js to compile the template. Usually this happens only for a blink of the eye, but could vary depending on how fast a given browser downloads the Vue framework among other factors.

Perhaps you have noticed a brief flicker when we have been running examples within JSFiddle. This flicker is caused by the string interpolation being displayed initially before being replaced by our data.

To solve this, Vue provides a very useful directive named v-cloak. When attaching this directive to an element, it will remain there until the Vue instance associated with the template finishes its compilation. So when the template is rendered and attached to the DOM, the directive is removed. This is very useful to us, because we can then add a CSS style which ensures that all elements with the v-cloak directive are not displayed. And when Vue.js is loaded up, the elements become visible because the directive is then removed from the elements.

Let’s see that in action. The example that I have added in advance simply renders a message data property within a paragraph. Since my browser already has the Vue.js framework cached, we won’t even see the flicker most of the time. So to slow things down a bit, I will wrap the Vue instance within a timeout function with a five second delay.

setTimeout(function() {
    new Vue({
        el: '#app',
        data: {
          message: 'Hello World!'
        }
    });
}, 5000);

Running the code, we will see that the string interpolation syntax is displayed for five seconds, before being replaced by the data property’s value.

Before running the code once again, let’s first add the v-cloak directive to the h1 element. Since the directive doesn’t take any expression or arguments, we just need to enter its name.

<h1 v-cloak>{{ message }}</h1>

Let’s run it again, but this time let’s inspect the paragraph. Notice how v-cloak is added as an HTML attribute on the DOM element. This is not useful until we add some CSS that hides elements with this attribute, so let’s do just that.

[v-cloak] {
     display: none;
}

Let’s run the code and see which difference it makes.

Now we no longer see the string interpolation being displayed initially, but after five seconds, the correct output appears. What happens here is that for as long as the v-cloak HTML attribute is present on the element, it is hidden by our CSS style. And when the Vue instance compiles the template, it removes the v-cloak attribute and the element then appears.