Problèmes rencontrés par v-cloak et leurs solutions

Problème

Lors de l'utilisation de vue, HTML lie l'instance de Vue et des informations telles que {{msg}} clignoteront lorsque la page sera chargée. Cela peut conduire à une mauvaise expérience utilisateur.

Utiliser v-cloak

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

(1) Utilisation

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

API officielle

On peut ajouter en css :

[v-cloak] {
  display: none;
}

puis ajouter v-cloak au point de chargement en html pour résoudre ce problème :

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

(2) La différence entre v-cloak dans Vue1.x et Vue2

Dans Vue1, les instances de Vue peuvent être montées sur le corps, alors que Vue2 ne le fait pas autorisez-le. Si vous souhaitez instancier la page entière, vous devez utiliser un div supplémentaire pour accueillir l'intégralité du contenu de la page et l'instancier.

Cette méthode doit également être utilisée lors de l'utilisation de v-cloak.

(3)Pourquoi le v-cloak que j'utilise est-il invalide ?

Dans les projets réels, nous utilisons souvent @import pour charger des fichiers CSS

@import "style.css?1.1.11"
@import "index.css?1.1.11"

et @import ne seront chargés que lorsque la page DOM sera complètement chargée. écrivez [v-cloak] dans le fichier css chargé par @import, la page scintillera toujours.

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.

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!