So verhindern Sie das Flashen von Vue in kleinen Projekten

Zusammenfassung

HTML: Element plus V-Umhang

CSS: [v-cloak]{Anzeige: keine}

Verfahren

Die Mustache-Syntax wird beim ersten Laden der Seite angezeigt.

v-cloak ist eine einfache und wichtige Möglichkeit, die Benutzererfahrung in kleinen VueJS-Projekten zu verbessern.

Verwendung

Fügen Sie in HTML v-cloak zu dem Tag hinzu, den Sie zum Verhindern des Blinkens benötigen.

<div id="app">  
 <nav>blabla</nav>  
 <main v-cloak>{{text}}</main>  
</div>

Legen Sie einen 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 ganz durchgelesen, verstehe aber das Prinzip von v-cloak ungefähr:

Zuerst kommt der CSS-Selektor. [target] wählt „alle Elemente mit dem Zielattribut“ aus. Klicken Sie hier, um die Selektoren zu überprüfen.

Dann wählt [v-cloak] alle Elemente mit dem v-cloak -Attribut aus.

Nachdem die Instanz initialisiert wurde, entfernt VueJS die Vue-spezifischen Attribute. Vor der Initialisierung der Instanz sieht der oben geschriebene HTML-Code für main tatsächlich folgendermaßen aus:

<main id="main" class="row" v-cloak="">

Fügen Sie dann CSS hinzu, um alle Elemente mit V-Cloak display: block einzustellen.

Tatsächlich ist es nicht nur v-cloak. Sie können versuchen, v-if zu verwenden. Verwenden Sie [v-if]{display:none} in CSS und der Effekt sieht gleich aus. Wie v-cloak wird auch v-if entfernt, nachdem die Instanz kompiliert wurde.

Quellcode

Dann habe ich einfach den Quellcode gelesen, der ungefähr diesem Absatz entspricht. Interessierte können ihn suchen und lesen, um ihn zu verstehen.

wenn (istRealesElement) {  
 // An ein reales Element anhängen  
 // prüfen, ob es sich um serverseitig gerenderten Inhalt handelt und ob wir  
 // eine erfolgreiche Hydratation.  
 wenn (alterVnode.nodeType === 1 && alterVnode.hasAttribute(SSR_ATTR)) {  
 alterVnode.removeAttribute(SSR_ATTR);  
 hydratisierend = wahr;  
 }  
}

Dies ist das Ende dieses Artikels darüber, wie man das Flashen von Vue in kleinen Projekten verhindert. Weitere verwandte Inhalte zum Flashen von Vue in kleinen Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!