Comment gérer le scintillement lorsque v-cloak est chargé dans vue

Cette fois, je vais vous montrer comment gérer le scintillement de v-cloak lors du chargement en vue. Quelles sont les précautions à prendre pour que v-cloak scintille lors du chargement en vue. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Lors de l'utilisation de vue pour lier des données, les variables clignoteront lors du rendu de la page. Par exemple,

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

verra

{{value.name}} apparaît sur la page, et les données seront rendues après quelques secondes. Il y a une instruction en vue pour résoudre ce problème, v-cloak

Alors, où faut-il placer v-cloak ? cette instruction doit-elle être ajoutée à chaque balise qui doit restituer des données ? Après des expériences, il a été constaté que v-cloak n'a pas besoin d'être ajouté à chaque balise, tant qu'il est ajouté à la balise montée par el,

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

De plus, ajoutez

[v-cloak] {
  display: none;
}

dans le css pour éviter que la page ne scintille.

Mais parfois, cela ne fonctionne pas. Il y a deux raisons possibles :

1. L'attribut d'affichage de v-cloak est écrasé par un niveau supérieur, vous devez donc augmenter le niveau<.>

2. Le style est placé dans le fichier css introduit par @import

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

Le style de v-cloak ne fonctionnera pas s'il est placé dans le fichier css introduit par @import. Il peut être placé en lien Dans le fichier CSS importé ou dans le style en ligne

Supplément :

Jetons un coup d'œil à l'interprétation de v-cloak dans Vue

Le rôle et l'utilisation de v-cloak

Utilisation :

Cette directive reste sur l'élément jusqu'à ce que l'instance associée termine la compilation. Lorsqu'elle est utilisée avec des règles CSS telles que [v-cloak] { display: none }, cette directive peut masquer les balises Moustache non compilées jusqu'à ce que l'instance soit prête. L'API officielle

HTML lie l'instance Vue, qui clignotera lors du chargement de la page

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

puis le mot de chargement terminé apparaîtra Afin de rendre l'effet plus évident, nous pouvons retarder le chargement de l'instance Vue

v-cloak peut résoudre ce problème. Ajoutez

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

au CSS et ajoutez v-cloak au point de chargement en HTML pour résoudre. ce problème

[v-cloak] {
 display: none;
}

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

La différence entre v-cloak dans Vue1, si vous souhaitez instancier la page entière, vous devez utiliser un autre p pour accueillir tout le contenu de la page et l'instancier

De cette façon, lorsque vous utilisez v-cloak, vous devez également utiliser cette méthode

Pourquoi le v-cloak que j'utilise ne fonctionne-t-il pas ?

Dans les projets réels, nous chargeons souvent des fichiers CSS via @import

Et @import ne sera pas chargé tant que la page DOM n'est pas complètement chargée si nous écrivons [v. -cloak] dans le fichier CSS chargé par @import fera encore scintiller la page.

Afin d'éviter cette situation, nous pouvons écrire [v-cloak] dans le css introduit par le lien, ou écrire un style css en ligne, qui est résolu.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

@import "style.css"
@import "index.css"

Lecture recommandée :

Comment utiliser bootstrap dans le projet vue-cli

Node.Js pour générer un Bitcoin adresse (Code ci-joint)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!