Как сделать, чтобы сразу выводилось «Hello Vue!»?

Question

[sitev_ru]

Увидел статью на Хабре https://habrahabr.ru/post/333004/ про Vue. Решил попробывать примерчик:

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

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

Меня напрягает сразу же следующее: появляется надпись {{ message }}, которая держится целую секунду! Потом надпись меняется на «Hello Vue!»

Как сделать, чтобы сразу выводилось «Hello Vue!»?

Comments

[yurygolikov]

В офицальной документации в "Введении" приведен ПРИМЕР того что вам нужно, неужели вы не дочитали? :)
https://ru.vuejs.org/v2/guide/
https://jsfiddle.net/chrisvfritz/50wL7mdz/
Скрипт загружается уже после рендеринга div.

[sitev_ru]

Проблема была в примере из статьи)) Нужно строчки местами поменять, тогда работает:

<script src="https://unpkg.com/vue"></script>

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

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

Спасибо!

Answer 1

[Igor Koch]

У вас долго подгружается библиотека, поэтому и висит, когда библиотека грузится быстро, или из кэша, такого не будет заметно. Для того чтобы скрыть этот эффект используют v-cloak.

Пример с таймаутами: https://jsfiddle.net/whata/50wL7mdz/50159/

P.s. Подключайте Vue в head блоке на странице.

Comments

[yurygolikov]

Да не в этом дело, так не нужно, у человека скрипт загружается уже после рендеринга div.