Résumé en une phrase
HTML : élément plus v-cloak
CSS : [v-cloak]{affichage : aucun}processus
La syntaxe de Beard sera affichée lors du premier chargement de la page.
v-cloak est une méthode simple et importante pour améliorer l'expérience utilisateur dans les petits projets VueJS.
usage
En HTML, ajoutez v-cloak aux balises dont vous avez besoin pour organiser le flashage
<div id="app">
<nav>blabla</nav>
<main v-cloak>{{text}}</main>
</div>Définissez le style de v-cloak en CSS. Ce style est appliqué uniquement [avant la compilation de l'instance de vue].
[v-cape]{
affichage : aucun ;
}principe
Je n'ai pas fini de lire le code source, mais je comprends à peu près le principe de v-cloak :
Le premier est le sélecteur CSS. L'utilisation de [target] sélectionne "tous les éléments avec l'attribut target". Vous pouvez consulter les sélecteurs ici.
Ensuite, [v-cloak] sélectionne tous les éléments avec l'attribut v-cloak .
Une fois l'initialisation de l'instance terminée, VueJS supprimera les attributs uniques à Vue. Avant que l'initialisation de l'instance ne soit terminée, le code HTML principal écrit ci-dessus ressemble en réalité à ceci :
<main id="main" class="row" v-cloak="">
Ajoutez ensuite du CSS pour display: block tous les éléments avec v-cloak.
En fait, ce n'est pas seulement v-cloak. Vous pouvez l'essayer avec v-if. Utilisez [v-if]{display:none} en CSS, et l'effet sera le même. Comme v-cloak , v-if est également supprimé une fois l'instance compilée.
Code source
Ensuite, je viens de lire le code source, qui est probablement ce paragraphe. Ceux qui sont intéressés peuvent rechercher et lire pour comprendre.
si (isRealElement) {
// montage sur un élément réel
// vérifie s'il s'agit d'un contenu rendu par le serveur et si nous pouvons effectuer
// une hydratation réussie.
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR);
hydratant = vrai ;
}
}Ceci conclut cet article sur la façon d'empêcher l'effet d'écran clignotant de Vue dans les petits projets. Pour plus de contenu sur l'écran clignotant de Vue dans les petits projets, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes suivants. soutenez davantage downcodes.com à l’avenir !