Formation : Vue.js 3 – Développement d’applications Web
Développer une application Single Page App (SPA) complète avec le Framework JavaScript Vue.js
- Principes fondamentaux de Vue.js
- Comparaison avec d’autres Framework (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
- 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
- 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…)
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Introduction à Pinia
- Installation et mise en place de Pinia
- Création du store
- Définition et accès à 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
Durée : 16h
Horaires : soirs / week-ends
Groupes de 5 à 10 personnes