Vue.js – Débutant

À l’issue de la formation, les participants seront capables de :

• Comprendre l’architecture et les principes de Vue.js 3
• Créer des composants interactifs et modulaires
• Gérer les données, événements, formulaires et directives
• Construire une application monopage simple avec Vue Router
• Organiser un projet Vue moderne avec Vite et Composition API

Introduction à Vue.js

• Vue.js : historique, philosophie, place dans l’écosystème JS
• Avantages et cas d’usage
• Présentation des versions (Vue 2 vs Vue 3)
• Mise en place du projet avec Vite ou Vue CLI

Fondamentaux de Vue.js

• Vue Instance et cycle de vie
• Le DOM réactif
• Data binding : interpolation, v-bind, v-model
• Gestion des événements : v-on, raccourcis clavier, événements personnalisés

Composants Vue

• Définition et structure d’un composant
• Props et communication parent-enfant
• Slots (simples et nommés)
• Gestion de l’état local et réutilisabilité

Directives et templates

• Directives intégrées : v-if, v-for, v-show, v-bind, v-on
• Classes et styles dynamiques
• Utilisation des filtres (deprecated), remplacement par computed/methods
• Création de directives personnalisées simples

Composition API – Vue 3

• Introduction à la Composition API
• setup(), ref(), reactive(), computed(), watch()
• Comparaison avec Options API
• Organisation du code : composabilité, lisibilité, réutilisabilité

Gestion des formulaires

• Binding avec v-model
• Validation de base
• Introduction à des bibliothèques de validation comme VeeValidate

Navigation avec Vue Router

• Configuration du router
• Création de routes, redirections, routes dynamiques
• Navigation programmatique
• Passage de paramètres et vues imbriquées

Introduction à la gestion d’état (Pinia)

• Présentation de Pinia (successeur de Vuex)
• Création et utilisation d’un store simple
• Communication entre composants via store

Exercices pratiques et mini-projets

• Création d’une application TODO ou gestionnaire de notes
• Interface formulaire avec validation simple
• Mini dashboard avec plusieurs vues et composants

• En cours de formation, par des études de cas ou des travaux pratiques
• Et, en fin de formation, par un questionnaire d'auto-évaluation