Umgang mit V-Cloak-Flackern beim Aktualisieren und Laden in Vue

Dieses Mal zeige ich Ihnen, wie Sie mit dem Blinken von V-Cloak in Vue beim Aktualisieren und Laden umgehen Hier ist der eigentliche Kampf. Werfen wir einen Blick auf den Fall. Wenn Sie Vue zum Binden von Daten verwenden, blinkt die

-Variable

beim Rendern der Seite. Beispielsweise wird

<p class="#app">
  <p>{{value.name}}</p>
</p>

beim Laden

erscheint auf der Seite und es dauert ein paar Sekunden, bis die Daten gerendert werden. Es gibt eine Anweisung in Vue, die dieses Problem lösen kann, v-cloak

Dann v-cloak muss platziert werden. Wo soll ich diese Anweisung zu jedem Etikett hinzufügen, das Daten rendern muss? Nach Experimenten habe ich festgestellt, dass v-cloak nicht zu jedem Etikett hinzugefügt werden muss von el. {{value.name}}

<p class="#app" v-cloak>
  <p>{{value.name}}</p>
</p>

Fügen Sie außerdem

[v-cloak] {
  display: none;
}

in das CSS ein, um ein Flackern der Seite zu verhindern.

Aber manchmal funktioniert es nicht. Es gibt zwei mögliche Gründe:

1 Das Anzeigeattribut

von V-Cloak

wird durch ein Attribut höherer Ebene überschrieben. daher muss das Level angehoben werden

[v-cloak] {
  display: none !important;
}

2. Der Stil wird in der von @import eingeführten CSS-Datei platziert

Der Stil von V-Cloak funktioniert nicht, wenn er in der eingeführten CSS-Datei platziert wird von @import. Es kann in der durch den Link eingeführten CSS-Datei oder im Inline-Stil platziert werden

Ergänzung:

Werfen wir einen Blick auf die Vue-Cloak-Interpretation

Die Rolle und Verwendung von V-Cloak

Verwendung:

Diese Direktive Bleibt auf dem Element, bis die zugehörige Instanz die Kompilierung beendet. Bei Verwendung mit CSS-Regeln wie [v-cloak] { display: none } kann diese Direktive unkompilierte Mustache-Tags ausblenden, bis die Instanz bereit ist. Offizielle API

<p id="app">
  {{msg}}
</p>

HTML bindet die Vue-Instanz, sie blinkt, wenn die Seite geladen wird

und dann wird das Wort „Laden abgeschlossen“ angezeigt. Um den Effekt deutlicher zu machen, können wir das Laden verzögern Die Vue-Instanz

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
},2000)

v-cloak kann dieses Problem lösen.

[v-cloak] {
 display: none;
}

zum CSS hinzufügen und v-cloak zum Ladepunkt in HTML hinzufügen > Der Unterschied zwischen V-Cloak in Vue1. Sie müssen ein anderes p verwenden, um den gesamten Seiteninhalt aufzunehmen und zu instanziieren.

Auf diese Weise müssen Sie bei Verwendung von V-Cloak auch diese Methode verwenden

Warum funktioniert der V-Cloak nicht?

In tatsächlichen Projekten laden wir häufig CSS-Dateien über @import

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

Und @import wird erst geladen, wenn das Seiten-DOM vollständig geladen ist ] wird in die von @import geladene CSS-Datei geschrieben, was dazu führt, dass die Seite weiterhin flackert.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von JS-Dekoratorfunktionen

vue.js+element-ui to Baumstruktur implementieren

Das obige ist der detaillierte Inhalt vonUmgang mit V-Cloak-Flackern beim Aktualisieren und Laden in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!