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

Programme de la formation
Formation Vue.js : Maîtriser le framework JavaScript pour applications web

• 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

• 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`

• 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.)

• 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

• 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

• 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`

• Routage avec Vue Router
• 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`

• 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

• 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

• 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

• 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