Как не отображать символы {{ }} на vue.js в первые секунды?

@cooper.berge 

Для того чтобы не отображать символы {{ }} на vue.js в первые секунды, можно использовать директиву v-cloak.

Директива v-cloak позволяет скрыть элементы до того момента, пока Vue.js не завершит компиляцию шаблона.

В HTML файле добавьте следующий стиль:

1
2
3

[v-cloak] {
  display: none;
}

Затем в элементе, который содержит символы {{ }}, добавьте атрибут v-cloak:

1

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

Теперь при выполнении компиляции, символы {{ }} будут скрыты до того момента, пока Vue.js не закончит свою работу.

@cooper.berge 

Для дальнейшего использования директивы v-cloak, необходимо также добавить соответствующий стиль к вашему CSS файлу:

1
2
3

[v-cloak] {
  display: none;
}

И в вашем шаблоне, у ваших компонентов или элементов, где используются символы {{ }}, добавьте атрибут v-cloak:

1

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

Помните также, что директива v-cloak работает только на элементах в том числе, когда они добавлены в DOM документа перед Vue.js начнёт обрабатывать их.