Comment utiliser v-cloak dans vue pour résoudre le problème du clignotement lors de l'actualisation ou du chargement

Cette fois, je vais vous montrer comment utiliser v-cloak in vue pour résoudre le problème de scintillement lors de l'actualisation ou du chargement. Qu'est-ce que c'est. les précautions. Voici le combat réel. Regardons le cas.

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

Lors du chargement, vous verrez

{{value.name}}

apparaître sur la page. Il faudra quelques secondes pour que les données soient rendues en vue. , il y a L'instruction peut résoudre ce problème, v-cloak

Alors, où devrait-on placer v-cloak ? Cette instruction doit-elle être ajoutée à chaque balise qui doit restituer des données ? v-cloak ne le fait pas. Il n'est pas nécessaire de l'ajouter à chaque balise, ajoutez-le simplement à la balise montée par el,

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

De plus, ajoutez

[v-cloak] {
  display: none;
}

au css pour éviter que la page ne clignote.

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

1. L'attribut d'affichage de v-cloak est écrasé par un attribut de niveau supérieur. il faut donc augmenter le niveau

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

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

Le style de v-cloak ne peut pas être placé dans le fichier css introduit par @import. La fonction peut être placée dans le fichier css introduit par le lien ou dans le style en ligne

Supplémentaire :

Jetons un coup d'œil à Vue ci-dessous Interprétation de v-cloak

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

Utilisation :

Cette directive reste sur l'élément jusqu'à la fin de la compilation de l'instance associée. 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

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

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

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

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

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

[v-cloak] {
 display: none;
}

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

<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'instancierDe 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.

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

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 !

Lecture recommandée :

Comment utiliser Vue pour implémenter un bouton de compte à rebours

Comment utiliser Vue pour écrire un deux liaison de données -way

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!