Formation Formation Vue.js : Maîtriser le framework JavaScript pour applications web

01.Introduction à Vue.js et l'écosystème Front-End

• —Présentation de Vue.js, ses avantages et sa place dans l'écosystème FE
• —Comparaison rapide avec React et Angular
• —Installation des outils : Node.js, npm/yarn, Vue CLI
• —Structure de base d'un projet Vue (CLI)
• —Création de votre première application Vue

02.Les fondamentaux de l'instance Vue et du templating

• —L'instance Vue : `new Vue({})`
• —Liaisons de données : `v-bind` (one-way binding)
• —Écouteurs d'événements : `v-on`
• —Directives structurelles : `v-if`, `v-else`, `v-show`
• —Directives de rendu de liste : `v-for`

03.Composants Vue : Modularité et Réutilisabilité

• —Principes des composants : Single File Components (.vue)
• —Passage de données parent-enfant : `props`
• —Émission d'événements enfant-parent : `emit`
• —Slots : distribution de contenu
• —Communication plus avancée (références, etc.)

04.Gestion des formulaires et liaisons bidirectionnelles

• —Liaison bidirectionnelle : `v-model`
• —Types d'inputs : texte, checkbox, radio, select
• —Modificateurs de `v-model` : `.lazy`, `.number`, `.trim`
• —Validation de formulaires simple
• —Gestion des états de formulaire

05.Le cycle de vie des composants Vue

• —Hooks du cycle de vie : `beforeCreate`, `created`, `beforeMount`, `mounted`
• —Hooks de mise à jour : `beforeUpdate`, `updated`
• —Hooks de destruction : `beforeDestroy`, `destroyed`
• —Utilisation pratique des hooks pour la logique d'application
• —Bonnes pratiques et erreurs courantes

06.Propriétés calculées et watchers

• —`computed` properties : optimisation et réactivité
• —Différences entre `computed` et méthodes
• —`watchers` : réaction aux changements de données spécifiques
• —Quand utiliser `computed` vs `watch`
• —Cas d'usage avancés pour `watch`

07.Routage avec Vue Router

08.Gestion d'état avancée avec Vuex (partie 1)

• —Pourquoi Vuex ? Problématiques de gestion d'état
• —Principes de base de Vuex : State, Mutations
• —Mise en place d'un store Vuex
• —Accès aux données de l'état : `mapState`
• —Modification de l'état : `commit`

09.Gestion d'état avancée avec Vuex (partie 2)

• —Actions : gestion des opérations asynchrones (`dispatch`)
• —Getters : dérivation d'état calculé
• —Modules Vuex : structuration d'applications complexes
• —Helpers Vuex : `mapGetters`, `mapActions`
• —Bonnes pratiques Vuex et design pattern

10.Requêtes HTTP et interaction avec les API

• —Introduction aux requêtes HTTP en JavaScript
• —Utilisation de `fetch` ou Axios
• —Intégration des requêtes dans les composants Vue/Vuex
• —Gestion des erreurs et des états de chargement
• —Interactions CRUD avec une API REST

11.Optimisation et déploiement d'applications Vue

• —Optimisation des performances : lazy loading, tree-shaking
• —Build et déploiement d'une application Vue
• —Configuration des variables d'environnement
• —Introduction aux PWA (Progressive Web Apps) avec Vue
• —Bonnes pratiques pour un code propre et maintenable

12.Sujets avancés et écosystème Vue.js

• —Introduction aux animations et transitions Vue
• —Utilisation de plugins et de directives personnalisées
• —Principes des tests unitaires et d'intégration avec Vue (Vue Test Utils)
• —Vue 3 (Composition API) : Aperçu rapide
• —Ressources et communauté Vue : où aller après la formation