Formation - Vue.js 3 - Développement d'applications Web

1 - Présentation de Vue.js

• Principes fondamentaux de Vue.js
• Comparaison avec d'autres frameworks (React, Angular)
• Utilisation de vue-cdn, vue-cli et de Vite
• Créer et tester une première application
• Architecture de projet
Atelier

Installation de Vue.js, configuration et mise en place d'un projet Vue.js avec Vue CLI et Vite

2 - Les fichiers de composants

• Les Single File Components (fichier.vue)
• Créer un composant : API Option vs API composition
• Lier un composant à l’application Le template
• Structuration et modularisation du code avec les modules ES (ECMAScript)
• L’encapsulation de style
Atelier

Création de composants SFC et les lier à une application

3 - Les syntaxes d’interpolation

• Les données du composants (propriété data de l’API Option)
• Introduction au Reactive API de l’API
• Composition : présentation de ref et reactive
• Opérateur moustache (interpolation) et expression JS
• Injecter du texte (v-text) et du HTML (v-html)
• Injecter sans prendre en compte les changements (v-once)
• Insérer un composant (balise de composant)
Atelier

Interpoler différents types de variables (tableaux, objets, chaînes de caractères contenant une balise HTML...)

4 - Rendu conditionnel

• Les directives v-if, v-else et v-else-if
• Affichage avec existence dans le DOM permanente avec v-show
• Utiliser v-if avec la balise template
Atelier

Affichage conditionnel en fonction de la valeur d’une variable

5 - Affichage de liste

• La directive v-for et ses syntaxes (in / of)
• L’attribut key
• Immutabilité des éléments de tableau
• Créer un range
• Utiliser v-for avec la balise template
• Priorité entre v-if et v-for
Atelier

Créer une liste d'éléments avec v-for

6 - Lier des attributs

• Lier un attribut avec v-bind
• Class-binding avec v-bind:class
• Style-binding avec v-bind:style (prefixer automatique)
• Les arguments dynamiques (v-bind[...])
• Syntaxe raccourcis (:attribut)
Atelier

Créer un composant avec des classes conditionnelles qui changent en fonction de l'état du composant

7 - Gérer les événements

• La directive v-on, Les modificateurs d’événement (stop, prevent, ...)
• Les modificateurs de touches (enter, space, ...)
• Créer des méthodes pour gérer vos événements
• Les arguments dynamiques (v-on[...])
• Syntaxe raccourcis (@event)
• La gestion des événements avec l’API Composition
• Hooks : événements liés au cycle de vie d’un composant (created, mounted, updated...)
Atelier

Créer un composant qui affiche un message différent à chaque étape de son cycle de vie

8 - Les formulaires

• Les directives v-model
• Liaison de valeur (checkbox, radio, select)
• Les modificateurs (lazy, number, ...)
• Les librairies de validation de formulaires tels que : vuelidate, vee-validate, yup...
Atelier

Lier des valeurs de formulaire avec les nouvelles directives

9 - Les composants avancés

• Passer des données à un composant avec v-bind
• Mise en cache de méthodes avec les propriétés calculées : methods VS computed, usage avec le Composition API
• Les watchers (watch) : utilisation des hooks de watch dans le Composition API
• Emettre des événements depuis un composant enfant : $emit (API Option), defineEmits (API Composition), utilisation avec v-model
• Les slots nommés et les slots dynamiques
• Passer des données à un composant enfant : props (API Option), defineProps (API Composition)
• Passer des données aux composants enfants : provide, inject
• Les différentes solutions pour communiquer avec le backend (fetch, axios, websockets...)
Atelier

Utilisation des slots, props et $emits pour la communication entre un composant parent et enfant

10 - Routing et navigation

• Installation et mise en place de vue-router
• Configuration du router
• Les routes
• Les liens (router-link)
• Les vues (router-view)
• Gérer les paramètres (utiliser les props)
• Redirections et alias
• Les navigations imbriquées
Atelier

Créer un menu dynamique

11 - Gérer l’état de son application avec Pinia

• Introduction à Pinia
• Installation et mise en place de Pinia
• Création du store
• Définition et accès a l’état
• Définition et accès aux actions
• Mutualiser les accès avec les getters
• Gérer des mutations asynchrones avec les actions
Atelier

Créer un store avec Pinia pour gérer l'état global d’une application

• Des vidéocasts pour revenir sur les points clés de la formation
• Des vidéos-tutos pour vous accompagner dans la mise en oeuvre de vos acquis