Как прятать {{ }} до появления значения?

Question

[Troodi Larson]

Добрый день. Новичок в этом фреймворке, и интересен вопрос: как можно убрать отображение на сайте {{ message }} до обработки его скриптом? То есть пока создается Vue, пользователь видит эти фигурные скобки (недолго, но всё же). Я на подобных сайтах не вижу такого. Спасибо!

Answer 1

[Владимир Проскурин]

В vue есть такой атрибут v-cloak, добавьте его к блоку с приложением

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

и в стилях пропишите

[v-cloak] {
  display: none;
}

Comments

[askhat]

Владимир Проскурин, почему это не включено из коробки?

[Владимир Проскурин]

Асхат Бикметов, а как? Ну допустим у вас есть этот div с шаблонами, а vue еще не загрузился, как vue сможет указать, чтобы блок прятали, если он сам еще не загрузился? Как решение, single file component или писать шаблоны в теге script, а блок компонента оставить пустым.

[askhat]

Владимир Проскурин, звучит логично, спасибо

[alex-1917]

и что, помогло?)))
это помогает только в одном случае - когда только один тот самый div id="app"
во всех остальных так или иначе скобки будут проскакивать
проверять на старых тормозных версиях браузеров или на мобилках

[Troodi Larson]

alex-1917, А почему не должно работать? Вы же блок скрываете стандартными средствами css.

[alex-1917]

Troodi Larson, а вы попробуйте))) в гугле тыщу раз разжевано, некогда объяснять, просто следуй моей тактике.
)))

[Troodi Larson]

alex-1917, Честно говоря, я не вижу проблем использования даже 10 разных ID, у вас стиль должен быть в хедере быть, чтобы он сразу всё спрятал, снизу уже js грузить. Поскольку проблема заключается, очевидно, где-то в подгрузке самого JS. В данном случае CSS скрывает всё что внутри однозначно.