Fonctionalités de base de Vue.Js

Par hjoseph, 19 février, 2024
Logo Vue2.Js

Dans le but de mieux connaître Vue.Js et de comprendre son utilité, il faut tout d’avoir une bonne idée en ce qui concerne sa base en explorant les fonctionnalités fournies et offertes par ce Framework. Parmi ces fonctionnalités, savoir ce qu’est une composante, ce qu’est une directive et le but de l’utilisation d’un DOM virtuel sont indispensables à la compréhension de Vue.Js.

 

Les composantes :

Une des fonctionnalités qu’apporte Vue est le système de composantes. Une composante est une façon d’avoir du code réutilisable pour une application web qui utilise Vue.Js. Elles sont considérées comme des éléments HTML personnalisés qui peuvent être dans la racine d’un projet Web (dans l’instance de vue principale) ou dans une autre composante. En plus de pouvoir créer ses propres composantes, Vue.js offre des composantes de base permettant d’effectuer certaines tâches et il est aussi possible d’importer des composantes créées par d’autres personnes dans sa propre application web.  

Certaines composantes par défaut sont :


 <Transition> :

Offre des effets d’animation a un élément ou composant.

<TransitionGroup> :

Offre des effets d’animation a plusieurs éléments ou composants faisant partie d’une liste.

<KeepAlive> :

Met en cache l’état d’un composant pour le sauvegarder.

<Teleport> :

Charge du contenu dans un autre élément du DOM.

 

DOM virtuel

Une des fonctionnalités les plus importantes que fournit Vue.Js est l’utilisation d’un DOM virtuel pour mettre à jour une page web. Normalement, le DOM traditionnel d’une page web traite chaque élément de la page comme un objet sous forme d’arborescence. Le problème que cela crée est que lorsqu’on effectue des modifications ou qu’on veut simplement trouver des éléments, on doit recharger la page au complet, ce qui a un impact sur la performance d’une application web. Le DOM virtuel traite les mêmes éléments du DOM d’une application web comme objets JavaScript et garde ces objets en mémoire. Lorsqu’un composant Vue est modifié, une arborescence du DOM virtuel est créée et compare le DOM traditionnel et le DOM virtuel pour identifier leurs différences. Ensuite, Vue.Js met à jour le DOM traditionnel en modifiant seulement les éléments identifiés par le DOM virtuel.

 

Les Directives

Une directive dans le contexte de Vue.Js est un attribut spécial qui permet de modifier le comportement et l’apparence d’un élément spécifique du DOM selon les paramètres définis. Les directives sont considérées très importantes et utilisées fréquemment dans le cadre de l’utilisation de Vue Js. Il est aussi possible d’avoir des directives personnalisées, mais Vue.Js est intégré avec des directives qu’il serait intéressant de tout d’abord connaître.

Certaines directives intégrées de Vue sont :

v-text :

Remplace le texte de l’élément par un nouveau texte.

v-html :

Met à jour le innerHTML de l’élément.

v-show :

Bascule entre afficher et cacher un élément dépendamment l’expression booléenne définie.

v-if :

Crée un élément si l’expression associée est vraie.

v-else :

Crée un élément si les expressions v-if ou v-else-if plus haut sont fausses.

v-else-if :

Crée un élément si les expressions v-if ou v-else-if plus haut sont fausses et que l’expression associée est vraie.

v-for :

Crée plusieurs éléments basés sur les valeurs fournies sous forme de liste ou itération.

v-on :

Ajoute un écouteur d’évènement a un élément.

v-bind :

Relie la valeur d’une propriété d’un élément HTML a une variable.

v-model :

Crée un lien bidirectionnel entre une entrée <input> et un élément du DOM.

v-slot :

Redirige le contenu d’un élément vers une balise nommée.

v-pre :

Ignore la compilation d’un élément.

v-once :

Charge un élément une seule fois puis ignore les futures mises à jour de cet élément.

v-memo :

Met à jour un élément seulement lorsqu’un autre élément spécifique est modifié.

v-cloak :

Cache un élément jusqu’à ce que sa compilation soit finie.

 

Références :

Étiquettes

Commentaires