CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3

Utilisation de la directive v-cloak dans Vue.js

Retour à la formation
Chapitre 1 Leçon 19
Précédent
Suivant

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

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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

Prérequis pour cette leçon

Avoir des connaissances basiques en JavaScript et Vue.js

Métiers concernés

Développeur web, ingénieur front-end, intégrateur web

Alternatives et ressources

Utiliser la directive v-once pour améliorer les performances en rendant un élément statique après le premier rendu

Questions & Réponses

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