So verwenden Sie V-Cloak in Vue, um das Problem des Blinkens beim Aktualisieren oder Laden zu lösen

Dieses Mal zeige ich Ihnen, wie Sie V-Cloak in Vue verwenden, um das Problem des Flackerns beim Aktualisieren oder Laden zu lösen. Was sind die Vorsichtsmaßnahmen Hier ist der eigentliche Kampf.

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

Beim Laden wird

{{value.name}}

auf der Seite angezeigt. Es dauert einige Sekunden, bis die Daten gerendert werden. Es gibt eine Anweisung in vue. Um dieses Problem zu lösen, sollte v-cloak jedem Tag hinzugefügt werden, der Daten rendern muss. Cloak muss nicht hinzugefügt werden. Fügen Sie zum Hinzufügen zu jedem Tag einfach

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

zum von el gemounteten Tag hinzu. Fügen Sie außerdem

[v-cloak] {
  display: none;
}

zum CSS hinzu, 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 Verwenden Sie diese Methode

Warum funktioniert die Verwendung von 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:

Wie man mit Vue einen Countdown-Button implementiert

Wie man mit Vue eine Zwei schreibt -Wege-Datenbindung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie V-Cloak in Vue, um das Problem des Blinkens beim Aktualisieren oder Laden zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!