Zusammenfassung in einem Satz
HTML: Element plus V-Cloak
CSS: [v-cloak]{display: none}Verfahren
Die Beard-Syntax wird angezeigt, wenn die Seite zum ersten Mal geladen wird.
v-cloak ist eine einfache und wichtige Methode zur Verbesserung der Benutzererfahrung in kleinen VueJS-Projekten.
Verwendung
Fügen Sie in HTML v-cloak zu den Tags hinzu, die Sie zum Organisieren des Flashens benötigen
<div id="app">
<nav>blabla</nav>
<main v-cloak>{{text}}</main>
</div>Legen Sie den Stil für V-Cloak in CSS fest. Dieser Stil wird nur angewendet [bevor die Vue-Instanz kompiliert wird].
[V-Umhang]{
Anzeige: keine;
}Prinzip
Ich habe den Quellcode noch nicht zu Ende gelesen, verstehe aber ungefähr das Prinzip von v-cloak :
Der erste ist der CSS-Selektor. Mit [Ziel] werden „alle Elemente mit dem Zielattribut“ ausgewählt. Sie können Selektoren hier überprüfen.
Dann wählt [v-cloak] alle Elemente mit dem v-cloak -Attribut aus.
Nachdem die Instanzinitialisierung abgeschlossen ist, entfernt VueJS die für Vue eindeutigen Attribute. Bevor die Instanzinitialisierung abgeschlossen ist, sieht der oben geschriebene Haupt-HTML-Code tatsächlich so aus:
<main id="main" class="row" v-cloak="">
Fügen Sie dann CSS zur display: block alle Elemente mit V-Cloak.
Tatsächlich ist es nicht nur V-Cloak. Sie können es mit v-if versuchen. Verwenden Sie [v-if]{display:none} in CSS, und der Effekt wird gleich aussehen. Wie v-cloak wird auch v-if entfernt, nachdem die Instanz kompiliert wurde.
Quellcode
Dann habe ich einfach den Quellcode gelesen, bei dem es sich wahrscheinlich um diesen Absatz handelt. Interessierte können suchen und lesen, um ihn zu verstehen.
if (isRealElement) {
// Montage auf ein reales Element
// Überprüfen Sie, ob es sich um servergerenderten Inhalt handelt und ob wir ihn ausführen können
// eine gelungene Flüssigkeitszufuhr.
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR);
feuchtigkeitsspendend = wahr;
}
}Damit ist dieser Artikel zum Verhindern des blinkenden Bildschirmeffekts von Vue in kleinen Projekten abgeschlossen. Weitere verwandte Inhalte zum blinkenden Bildschirm von Vue in kleinen Projekten finden Sie in den vorherigen Artikeln auf downcodes.com Unterstützen Sie downcodes.com in Zukunft mehr!