Die Rolle und Verwendung von vue v-cloak: https://www.cnblogs.com/chengfengchi/p/11336927.html
Die Rolle und Verwendung von V-Cloak kann durch V-Text ersetzt werden, aber es gibt einen Unterschied
Verwendung:
Diese Anweisung bleibt auf dem Element, bis die zugehörige Instanz die Kompilierung beendet. Bei Verwendung mit CSS-Regeln [v-cloak] { display: none } kann diese Anweisung nicht kompilierte Moustache-Tags ausblenden, bis die Instanz bereit ist. Offizielle API
|
1
2
3
|
<div id=
"app"
>
{{msg}}
</div>
|
HTML ist an eine Vue-Instanz gebunden und blinkt beim Laden der Seite
Dann erscheinen die 加载完成 Wörter, um den Effekt deutlicher zu machen. Wir können das Laden der Vue-Instanz verzögern
|
1
2
3
4
5
6
7
8
|
setTimeout(() => {
new
Vue({
el:
'#app'
,
data: {
msg:
'hello'
}
})
},2000)
|
v-cloak kann dieses problem lösen, in css hinzufügen
|
1
2
3
|
[v-cloak] {
display: none;
}
|
Fügen Sie dem Ladepunkt in HTML v-cloak hinzu, um dieses Problem zu lösen
|
1
2
3
|
<div id=
"app"
v-cloak>
{{msg}}
</div>
|
Der Unterschied zwischen Vue Cloak in Vue1.x und Vue2
In Vue1 ist es zulässig, Vue-Instanzen auf dem Hauptteil bereitzustellen, Vue2 jedoch nicht. Um die gesamte Seite zu instanziieren, müssen Sie ein anderes div verwenden, um den gesamten Seiteninhalt aufzunehmen und zu instanziieren.
Wenn Sie also V-Cloak verwenden, müssen Sie auch diese Methode verwenden
Warum ist der von mir verwendete V-Umhang ungültig?
In tatsächlichen Projekten verwenden wir häufig @import, um CSS-Dateien zu laden
|
1
2
|
@
import
"style.css"
@
import
"index.css"
|
Und @import wird geladen, nachdem das Seitendom vollständig geladen wurde. Wenn wir [v-cloak] es in die von @import geladene CSS-Datei schreiben, wird die Seite weiterhin geflasht.
Um diese Situation zu vermeiden, können wir [v-cloak] in das durch Link eingeführte CSS schreiben oder einen Inline-CSS-Stil schreiben, der gelöst wird.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist, und ich hoffe, dass Sie das Skripthaus unterstützen.