vielleicht ist dies eine triviale Frage.Vuejs - Hide Vuejs Syntax beim Laden der Seite
also, wenn ich meine Vuejs-Anwendung auf Browser mit aktiviert Throttling Download-Geschwindigkeit (setzt auf niedrige Verbindung). Ich habe unfertige Vue-Syntax-Ausgabe im Browser.
Ich weiß, dass wir dieses heraus mit zeigt Laden Bild Trick kann vor gesamte Seite geladen ist, aber es ist es eine beste Lösung dieses Problem beheben?
können Sie verwenden, um die v-cloak Richtlinie, die die vue Instanz verstecken, bis die Kompilierung beendet
ich folgende codepen angebracht. Sie können den Unterschied mit und ohne v-cloak sehen.
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>
yeah Ich habe es ... Danke, Ihr Codepen wäre Hilfe für die Neuankömmlinge. – antoniputra
Sie erhalten immer noch die erste {{test}}, während Vuejs lädt, so ist es nicht eine perfekte Antwort – twigg
@ twigg Das ist der Punkt. Der erste zeigt reguläre Tags und der zweite zeigt getarnte Tags mit dem Attribut 'v-cover'. –
Sie könnten jedes Rendering zu einem einfachen Wrappercomponent bewegen. Die VueJS-Initialisierung, z.B. new Vue (....) sollte abgesehen von dieser einzelnen Wrapper-Komponente kein HTML enthalten.
Je nach Setup könnten Sie sogar <app>Loading...</app> haben, wobei App die Wrapper-Komponente mit jedem Laden HTML oder Text dazwischen ist, die dann beim Laden ersetzt wird.
Wie von anderen empfohlen v-cloak ist die richtige Lösung. Wie @ DelightedD0D erwähnt, ist es jedoch klobig. Eine einfache Lösung besteht darin, CSS im Pseudo Selektor ::before der v-cloak Direktive hinzuzufügen.
In Ihrem sass/weniger Datei etwas entlang der Linien von
[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%;
}
Natürlich können Sie einen gültigen und zugänglich Weg zum loader Bild liefern bräuchten. Es wird so etwas wiedergeben.
Hoffe, es hilft.
in api sagt: '[V-Umhang] { Anzeige: keine; }
Nur zum Haupt 'App' div sollte in Ordnung sein – Jeff
@Jeff ah, ich habe es gerade bewusst. gut 'V-Umhang' scheint die beste Antwort zu sein. Danke @Gus !! – antoniputra