Probleme, auf die V-Cloak stößt, und deren Lösungen

Problem

Bei der Verwendung von Vue bindet HTML die Vue-Instanz und Informationen wie {{msg}} blinken, wenn die Seite geladen wird. Dies kann zu einer schlechten Benutzererfahrung führen.

Mit v-cloak

v-cloak kann dieses Problem lösen.

(1) Verwendung

Diese Anweisung verbleibt auf dem Element, bis die zugehörige Instanz kompiliert wird. Bei Verwendung mit CSS-Regeln wie [v-cloak] { display: none } verbirgt diese Direktive nicht kompilierte Mustache-Tags, bis die Instanz bereit ist.

Offizielle API

Wir können CSS hinzufügen:

[v-cloak] {
  display: none;
}

und dann v-cloak zum Ladepunkt in HTML hinzufügen, um dieses Problem zu lösen:

<div id="app" v-cloak>
    {{msg}}
</div>

(2) Der Unterschied zwischen V-Cloak in Vue1.x und Vue2

In Vue1 dürfen Vue-Instanzen am Körper montiert werden, in Vue2 hingegen nicht Wenn Sie die gesamte Seite instanziieren möchten, müssen Sie ein zusätzliches Div verwenden, um den gesamten Seiteninhalt aufzunehmen und zu instanziieren.

Diese Methode muss auch bei Verwendung von v-cloak verwendet werden.

(3)Warum ist der von mir verwendete V-Umhang ungültig?

In tatsächlichen Projekten verwenden wir häufig @import zum Laden von CSS-Dateien.

@import "style.css?1.1.11"
@import "index.css?1.1.11"

und @import werden erst geladen, wenn das Seiten-DOM vollständig geladen ist Schreiben Sie [v-cloak] in die von @import geladene CSS-Datei, die Seite flackert weiterhin.

Um diese Situation zu vermeiden, können wir [v-cloak] in das durch den Link eingeführte CSS schreiben oder einen Inline-CSS-Stil schreiben, der gelöst ist.

Das obige ist der detaillierte Inhalt vonProbleme, auf die V-Cloak stößt, und deren Lösungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!