Exercices "Bases de Vue.js"
Introduction
Cette série d'exercices vous permet de pratiquer les fondamentaux de Vue.js 3 avec la Composition API. Vous allez créer des mini-applications interactives pour maîtriser :
- Les variables réactives (
ref(),reactive()) - L'interpolation de texte (
) - Les directives (
v-model,v-bind,v-if,v-for,v-on) - Les propriétés calculées (
computed()) - Les watchers (
watch()) - Le cycle de vie des composants (
onMounted(), etc.)
Liste des exercices
| # | Exercice | Concepts pratiqués |
|---|---|---|
| 1 | Compteur | ref(), v-on, événements |
| 2 | Liste de tâches | v-for, v-model, tableaux réactifs |
| 3 | Affichage conditionnel | v-if, v-show, v-else |
| 4 | Formulaire | v-model, validation |
| 5 | Propriétés calculées | computed() |
| 6 | Composant enfant | Props, événements personnalisés |
| 7 | Cycle de vie | onMounted(), onUnmounted() |
| 8 | Watchers | watch(), watchEffect() |
Mise en place
Obtenir le dépôt de l'exercice
Rejoindre l'exercice
Cliquez sur le lien GitHub Classroom ci-dessous pour créer automatiquement votre propre copie du dépôt :
Installer les dépendances
Une fois le dépôt cloné sur votre machine, ouvrez un terminal à la racine du projet et exécutez :
bash
npm installLancer le serveur de développement
Démarrez le serveur avec :
bash
npm run devAccéder à l'application
Ouvrez l'URL affichée dans le terminal (généralement http://localhost:5173) pour accéder à l'application.
Structure du projet
Le projet contient un fichier Vue par exercice. Chaque exercice comporte :
- Des instructions en commentaires dans le code
- Un template de départ à compléter
- Des données de test pour valider votre solution
src/
├── components/
│ ├── Ex1-Compteur.vue
│ ├── Ex2-ListeTaches.vue
│ ├── Ex3-Conditionnel.vue
│ ├── Ex4-Formulaire.vue
│ ├── Ex5-Computed.vue
│ ├── Ex6-Composant.vue
│ ├── Ex7-CycleVie.vue
│ └── Ex8-Watchers.vue
├── App.vue
└── main.jsSolutions
Corrigés disponibles
Les solutions de tous les exercices sont disponibles sur :