Introduction à Vue.js (v3)

Vue.js est un framework JavaScript open-source et progressif utilisé pour la construction d'interfaces utilisateur (UI) web. Il a été développé par Evan You en 2014. La dernière version stable est Vue 3.0, sortie en septembre 2020, avec Vue 3.2.47 comme dernière mise à jour en février 2023.

Vue.js utilise une syntaxe de modèle (templates) qui mélange du HTML avec des expressions et directives JavaScript pour décrire la sortie HTML en fonction de l'état du modèle.

Vue.js suit automatiquement les changements d'état dans le modèle et met à jour efficacement le DOM (Document Object Model) en fonction des changements détectés.

Vue Devtools est une extension de navigateur disponible pour Firefox, Chrome et Edge qui permet d'inspecter et de déboguer des applications Vue.js. Elle est indispensable pour le développement.

Pour installer Vue Devtools sur Chrome, il faut visiter le Web Store de Chrome (https://chrome.google.com/webstore), rechercher 'Vue Devtools' et choisir la version actuelle (v6.x) qui supporte Vue 3 et Vue 2. Ajouter l'extension à Chrome.

Si vous utilisez des fichiers HTML locaux sans serveur Web, l'extension Vue Devtools n'est pas activée par défaut. Il faut l'activer en autorisant l'accès aux URL de fichiers en cliquant sur l'icône de l'extension et en sélectionnant 'Gérer l'extension'.

Vue Devtools permet d'inspecter l'instance de l'application et ses composants. On peut également voir et modifier les données associées à chaque composant directement dans l'extension.

Les doubles accolades {{ }} permettent d'intégrer des expressions JavaScript dans le DOM.

On peut utiliser des expressions JavaScript simples dans les doubles accolades {{ }} pour afficher des valeurs, des calculs simples ou des résultats d'appels de fonction.

Les expressions ternaires sont des expressions JavaScript qui renvoient une valeur en fonction d'une condition. On peut les utiliser pour effectuer des choix conditionnels dans les doubles accolades {{ }}.

La directive v-for permet d'itérer sur un tableau ou un objet et d'afficher son contenu dans le DOM.

L'attribut :key est utilisé avec la directive v-for pour identifier de manière unique chaque élément de la liste. Cela permet à Vue.js d'optimiser le rendu de la liste et de gérer les modifications efficacement.

La décomposition d'objets (destructuration) est un moyen de séparer les propriétés d'un objet en variables distinctes.

La directive v-model permet de créer un lien bidirectionnel entre un input HTML et une propriété du modèle. Les modifications de l'input sont reflétées dans le modèle et vice versa.

Les modifieurs de v-model permettent d'ajuster le comportement par défaut de la liaison bidirectionnelle. Par exemple, le modifieur .lazy met à jour le modèle uniquement après un événement 'blur' (perte de focus).

La directive v-on permet d'associer un gestionnaire d'événement à un élément HTML. Elle utilise la syntaxe v-on:event=

Le raccourci @ peut être utilisé à la place de v-on: pour associer des gestionnaires d'événements. Par exemple, @click=

Les méthodes sont des fonctions déclarées dans l'objet options de Vue.js. Elles permettent de regrouper et d'organiser le code JavaScript utilisé dans le template.

La directive v-if permet d'afficher ou de masquer un élément HTML en fonction d'une condition.

La directive v-else permet d'afficher un élément HTML si la condition de la directive v-if précédente est fausse.

La directive v-bind: permet de lier un attribut HTML à une propriété du modèle.

La directive : est un raccourci pour v-bind:. Elle permet de lier un attribut HTML à une propriété du modèle.

La directive :class peut être utilisée pour appliquer ou retirer dynamiquement des classes CSS à un élément HTML en fonction d'une condition.

Les propriétés calculées sont des expressions JavaScript qui sont calculées une fois et mises en cache. Elles sont utilisées pour transformer ou effectuer des calculs sur les données du modèle et les rendre disponibles en tant que variables dans le template.

Les propriétés calculées sont optimisées par Vue.js car elles sont calculées une fois et mises en cache. Si une dépendance de la propriété calculée change, elle est recalculée automatiquement.