Vuejs - Ukryj składnię vuejs podczas ładowania strony

Question

może to banalne pytanie.

Tak więc, gdy uruchomię moją aplikację vuejs na przeglądarce z włączeniem przepustnicy prędkość pobierania (ustawia się na niskie połączenie). Mam niedokończoną wersję składni vue w przeglądarce.

Wiem, że możemy się z tego oszukać pokazując loading image zanim cała strona jest załadowany, ale jest to jakaś najlepszym rozwiązaniem, aby rozwiązać ten problem?

Answer 1

Można użyć dyrektywy v-cloak, która ukryje vue instancji aż kompilacja zakończy

Answer 2

I dołączone następujące codepen. Możesz zobaczyć różnicę zi bez 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

Można przenieść dowolną rendering do prostego owijkicomponent. Inicjalizacja VueJS, np. new Vue (....) nie powinien zawierać żadnego kodu HTML oprócz tego pojedynczego komponentu opakowania.

zależności od konfiguracji można nawet mieć <app>Loading...</app> gdzie aplikacja jest składnikiem wrapper z dowolnego HTML załadunku lub tekst w między który następnie otrzymuje od obciążenia.

Answer 4

Zgodnie z sugestią innych osób posługujących się v-cloak jest właściwym rozwiązaniem. Jednak jak @ DelightedD0D wspomniał, że jest niezgrabny. Prostym rozwiązaniem jest dodanie niektórych CSS do dyrektywy pseudo selektor ::before z ::before.

W swojej Sass/mniejszy plik coś wzdłuż linii

[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%; 
} 

Oczywiście trzeba by zapewnić prawidłową i dostępną ścieżkę do ładowarki obrazu. Wyrenderuje coś takiego.

Nadzieję, że to pomaga.