Liste des exercices - Cours 141
Vue d'ensemble
| Module | Titre | Exercices | Objectif |
|---|---|---|---|
| 1 | Bases de Vue.js | 8 | Maîtriser la syntaxe Vue |
| 2 | Composants Vuetify | Mini projet | Découvrir Material Design |
| 3 | Pokédex Vuetify | 17 étapes | Créer une vraie app ! |
| Total | 25+ |
Module 1 : Bases de Vue.js
Tu vas apprendre à : maîtriser la syntaxe et les concepts fondamentaux de Vue.js
| # | Exercice | Concepts |
|---|---|---|
| 1 | Rendu déclaratif | |
| 2 | Liaisons d'attributs | :src, :href, :class |
| 3 | Gestion des événements | @click, @input |
| 4 | Rendu conditionnel | v-if, v-else, v-show |
| 5 | Rendu de liste | v-for, :key |
| 6 | Computed & Watchers | computed(), watch() |
| 7 | Liaisons formulaires | v-model |
| 8 | Cycle de vie | onMounted(), onUnmounted() |
Ressources :
Module 2 : Mini projet Vuetify
Tu vas apprendre à : découvrir et utiliser les composants Vuetify
| Étape | Tâche | Concepts |
|---|---|---|
| 1 | Créer un nouveau projet Vuetify | npm create vuetify |
| 2 | Nettoyer le projet | Supprimer src/layouts/ |
| 3 | Coder dans App.vue | Structure SFC |
| 4 | Découvrir les composants | Boutons, cartes, grilles |
| 5 | Créer des composants | src/components/ |
Ressources :
- Documentation Vuetify
- Vuetify Snips (templates gratuits)
Module 3 : Projet Pokédex Vuetify
Tu vas créer : une application Pokédex complète avec Vue.js et Vuetify !
Phase 1 : Structure et affichage (Étapes 1-5)
| # | Étape | Fonctionnalité |
|---|---|---|
| 1 | Création du projet | Initialisation Vuetify |
| 2 | Configuration routes | Vue Router |
| 3 | Page d'accueil | Layout de base |
| 4 | Données statiques | Liste de Pokémon |
| 5 | Affichage en grille | v-row, v-col, v-card |
Phase 2 : Navigation et recherche (Étapes 6-9)
| # | Étape | Fonctionnalité |
|---|---|---|
| 6 | Navigation | RouterLink |
| 7 | Page de détail | Route dynamique |
| 8 | Recherche | Filtrage en temps réel |
| 9 | Tri | Trier par nom/numéro |
Phase 3 : State management (Étapes 10-12)
| # | Étape | Fonctionnalité |
|---|---|---|
| 10 | Installation Pinia | Store global |
| 11 | Favoris | Ajouter/retirer |
| 12 | Page favoris | Liste des favoris |
Phase 4 : Formulaires et CRUD (Étapes 13-17)
| # | Étape | Fonctionnalité |
|---|---|---|
| 13 | Formulaire création | Ajouter un Pokémon |
| 14 | Validation | Règles de validation |
| 15 | Modification | Éditer un Pokémon |
| 16 | Suppression | Supprimer avec confirmation |
| 17 | Persistance | localStorage |
Bonus : API REST
| # | Étape | Fonctionnalité |
|---|---|---|
| 18 | Connexion API | Axios GET |
| 19 | CRUD complet | POST, PUT, DELETE |
| 20 | Authentification | Login/Logout |
Ressources :
Progression visuelle
NIVEAU 1 - Fondamentaux Vue.js (Module 1)
══════════════════════════════════════════
[■■■■] Syntaxe de base → Tu maîtrises les directives
[■■■■] Réactivité → Tu comprends ref() et reactive()
[■■■■] Composition API → Tu organises ton code
NIVEAU 2 - Interface Vuetify (Module 2)
══════════════════════════════════════════
[■■■■] Composants UI → Tu utilises Material Design
[■■■■] Grille responsive → Tu crées des layouts adaptés
[■■■■] Thèmes → Tu personnalises l'apparence
NIVEAU 3 - Application complète (Module 3)
══════════════════════════════════════════
[■■■■] Vue Router → Tu navigues entre les pages
[■■■■] Pinia → Tu gères l'état global
[■■■■] Formulaires → Tu valides les saisies
[■■■■] API REST → Tu communiques avec un serveurRessources complémentaires
Cheat Sheets (PDF)
- Vue Essentials Cheat Sheet
- Vue 3 Composition API Cheat Sheet
- Vue Router Cheat Sheet
- Pinia Cheat Sheet
Dépôts GitHub
Conseil
Faites le tutoriel Vue.js officiel en parallèle des cours. Les exercices sont plus faciles quand on a compris les concepts de base !
Important
N'hésitez pas à consulter la démo et le code du professeur si vous êtes bloqué, mais essayez d'abord par vous-même !