Comment gérer le scintillement de v-cloak lors de l'actualisation et du chargement dans vue

Cette fois, je vais vous montrer comment gérer le clignotement de v-cloak dans Vue lors du rafraîchissement et du chargement. Quelles sont les précautions pour gérer le clignotement de v-cloak dans Vue lors du rafraîchissement et du chargement. chargement Voici le combat réel. Jetons un coup d’œil au cas.

Lorsque vous utilisez vue pour lier des données, la variable clignotera 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 cela prendra quelques secondes avant que les données ne soient rendues. Il y a une instruction en vue pour résoudre ce problème, v-cloak

Ensuite, v-cloak Où doit-il être placé ? Cette instruction doit-elle être ajoutée à chaque étiquette 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 étiquette. l'étiquette montée par el.

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

De plus, vous devez ajouter

[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 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

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 :

Explication détaillée de l'utilisation des fonctions du décorateur JS

vue.js+element-ui pour implémenter l'arborescence

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!