Wie man mit Flackern umgeht, wenn V-Cloak in Vue geladen wird

Dieses Mal zeige ich Ihnen, wie Sie mit dem Flackern von V-Cloak beim Laden in Vue umgehen. Das Folgende ist ein praktischer Fall .

Wenn Sie Vue zum Binden von Daten verwenden, blinken Variablen 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

Also, wo sollte v-cloak platziert werden ? Nicht jedem Tag, der Daten rendern muss, muss diese Anweisung hinzugefügt werden. Nach Experimenten wurde festgestellt, dass v-cloak nicht zu jedem von el bereitgestellten Tag hinzugefügt werden muss >

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

{{value.name}} und , fügen Sie

[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 eine höhere Ebene überschrieben, daher müssen Sie die Ebene erhöhen 🎜>

[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 von @import eingeführten CSS-Datei platziert wird in der per Link eingeführten CSS-Datei oder im Inline-Stil

Ergänzung:

Lassen Sie uns einen Blick darauf werfen bei der Interpretation von V-Cloak in Vue Die Rolle und Verwendung von V-Cloak

Verwendung:

Diese Direktive bleibt bestehen das Element, bis die zugehörige Instanz kompiliert ist. 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 wirdund 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:

So verwenden Sie Bootstrap im Vue-Cli-Projekt

Node.Js zum Generieren eines Bitcoin Adresse (Code beigefügt)

Das obige ist der detaillierte Inhalt vonWie man mit Flackern umgeht, wenn V-Cloak in Vue geladen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!