Vuejs - Скрыть синтаксис vuejs при загрузке страницы

Question

Возможно, это тривиальный вопрос.

поэтому, когда я запускаю свое приложение vuejs в браузере, вы можете активировать скорость загрузки дросселя (устанавливает низкое соединение). Я получил незавершенный вывод синтаксиса vue в браузере.

Я знаю, что мы можем обмануть это с показывая изображение загрузки, прежде всего страница загружена, но есть ли лучшее решение, чтобы исправить это?

Answer 1

Вы можете использовать v-cloak директивы, которая будет скрывать VUE экземпляра, пока компиляция не завершится

Answer 2

я прикрепил следующий codepen. Вы можете видеть разницу с v-cloak и без.

<div id="js-app"> 
[regular]Hold it... <span>{{test}}</span><br/> 
[cloak]Hold it... <span v-cloak>{{test}}</span> 
</div> 

---

http://codepen.io/gurghet/pen/PNLQwy

Answer 3

Вы можете переместить любой рендеринг в простой оберткеcomponent. Инициализация VueJS, например. новый Vue (....) не должен содержать HTML кроме этого единственного компонента-обертки.

В зависимости от настройки у вас может быть даже <app>Loading...</app>, где приложение - это компонент оболочки с любой загрузкой HTML или текста, который затем заменяется при загрузке.

Answer 4

Как было предложено другими пользователями с использованием v-cloak, это правильное решение. Однако, как сказал DelightedD0D, это неудобно. Простым решением является добавление CSS в псевдоселектор ::before директивы v-cloak.

В вашей дерзости/меньше файл что-то вдоль линий

[v-cloak] > * { display:none; } 
[v-cloak]::before { 
    content: " "; 
    display: block; 
    position: absolute; 
    width: 80px; 
    height: 80px; 
    background-image: url(/images/svg/loader.svg); 
    background-size: cover; 
    left: 50%; 
    top: 50%; 
} 

Конечно вы должны предоставить действительный и доступный путь к погрузчику изображению. Это что-то вроде.

Надеется, что это помогает.