Explication détaillée de l'utilisation de v-cloak dans Vue

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de v-cloak dans Vue. Quelles sont les précautions lors de l'utilisation de v-cloak dans Vue. Voici des cas pratiques, prenons. un regard.

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

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 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{{msg}}

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

v-cloak peut résoudre ce problème. Ajoutez du HTML au CSS pour lier l'instance Vue. Lorsque la page est chargée, elle clignote et. puis les mots Loading Complete apparaîtront. Pour rendre l'effet plus évident, nous pouvons retarder le chargement de l'instance Vue

[v-cloak] {
 display: none;
}

La différence entre v-cloak dans Vue1.x et Vue2Chargement. point en html L'ajout de v-cloak peut résoudre ce problème

Vue1 permet de monter les instances de Vue sur le corps, mais Vue2 ne le permet pas. Si vous souhaitez instancier la page entière, vous devez utiliser un autre p. Pour accueillir l'intégralité du contenu de la page, instanciez-le

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

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

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

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

Afin d'éviter cette situation, nous pouvons écrire [v-cloak] dans l'introduction du lien Dans le CSS, ou écrivez un style CSS en ligne, ceci est résolu. @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, la page scintillera toujours.

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 :

Résumé des méthodes pour améliorer les performances de Node.js

Implémentation JS de la fenêtre contextuelle d'enregistrement de connexion par menu déroulant- fenêtre ouverte

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!