CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3 Utilisation de la directive v-cloak dans Vue.js

Utilisation de la directive v-cloak dans Vue.js

La directive v-cloak
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Vue JS 3
Revoir le teaser Je m'abonne
Transcription

Cette leçon fait partie de la formation
69,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

Cette leçon fait partie de la formation
69,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Comprendre et appliquer la directive v-cloak pour améliorer l'affichage des interpolations dans Vue.js

Apprenez à utiliser la directive v-cloak pour éviter l'apparition des accolades doubles dans les interpolations de Vue.js.

Dans cette leçon, nous allons voir comment utiliser la directive v-cloak dans Vue.js pour empêcher les accolades doubles des interpolations de s'afficher dans le DOM avant que les expressions ne soient résolues par Vue.js. Nous commencerons par définir une propriété dans le modèle et l'afficherons dans un élément <div> en utilisant l'interpolation. Ensuite, nous introduirons l'utilisation de la directive v-cloak sur la balise <div> afin d'améliorer l'affichage. Nous ajouterons également des styles CSS pour masquer temporairement ces éléments jusqu'à ce que Vue.js prenne le relais pour évaluer et afficher les expressions.

Cette technique est essentielle pour améliorer l'expérience utilisateur en empêchant l'affichage temporaire de balises non résolues. Enfin, nous conclurons par une introduction à la directive v-once, qui sera abordée dans la vidéo suivante.

Voir plus
Questions réponses
Quelle est la fonction principale de la directive v-cloak dans Vue.js?
La directive v-cloak est utilisée pour empêcher l'affichage des accolades doubles des interpolations avant que Vue.js n'ait évalué les expressions.
Pourquoi ajoute-t-on du CSS pour les éléments avec v-cloak?
On ajoute du CSS pour les éléments avec v-cloak afin de les masquer temporairement et éviter d'afficher les expressions non évaluées dans le DOM.
Que se passe-t-il lorsque Vue.js a fini d'évaluer les expressions avec v-cloak?
Une fois que Vue.js a fini d'évaluer les expressions, l'attribut v-cloak est retiré automatiquement, permettant ainsi l'affichage normal des éléments.

Programme détaillé