How can I make it immediately display "Hello Vue!"?

Question

JavaScript

I saw an article on Habré https://habrahabr.ru/post/333004/ about Vue. Decided to try an example:

<div id="app">{{ message }}</div>

<script src="https://unpkg.com/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

The following immediately annoys me: the inscription {{ message }} appears, which lasts for a whole second! Then the inscription changes to "Hello Vue!"
How can I make it immediately display "Hello Vue!"?

Answer 1

Your library takes a long time to load, so it hangs when the library is loaded quickly, or from the cache, this will not be noticeable. To hide this effect use v-cloak .
Example with timeouts: https://jsfiddle.net/whata/50wL7mdz/50159/
Ps Include Vue in the head block on the page.