Prompt Title: Vue.js 3 Exercise

Vous pouvez créer un exercice qui intègre ces concepts pour votre élève. Voici une idée d'exercice qui englobe l'utilisation des props, emits, ainsi que les aspects responsives avec CSS Grid et Media Queries.

Exercice : Création d'une liste de tâches avec Vue.js 3

Objectifs :

1. Utiliser les props pour passer des données entre les composants.
2. Utiliser les émetteurs d'événements pour communiquer entre les composants.
3. Créer un design responsive avec CSS Grid et Media Queries.

Instructions :

1. Créez un nouveau projet Vue.js 3.
2. Créez un composant TaskList.vue qui affichera la liste des tâches.
3. Créez un composant TaskItem.vue qui affichera un élément de la liste des tâches.

TaskList.vue :

• Utilisez une boucle v-for pour afficher une liste de tâches en utilisant le composant TaskItem.
• Passez la tâche courante comme prop au composant TaskItem.

TaskItem.vue :

• Utilisez la prop pour afficher le titre de la tâche.
• Ajoutez un bouton "Terminer" qui, lorsqu'il est cliqué, émet un événement personnalisé "task-complete" avec l'ID de la tâche en payload.
• Dans TaskList.vue, écoutez l'événement "task-complete" et supprimez la tâche correspondante de la liste.

Responsivité :

• Utilisez CSS Grid pour afficher les éléments de la liste de tâches.
• Ajoutez des Media Queries pour adapter l'affichage des éléments de la liste de tâches en fonction de la largeur de l'écran.

Voici un exemple de structure de fichier pour ce projet :

markdownCopy code
- src
  - components
    - TaskList.vue
    - TaskItem.vue
  - App.vue
  - main.js

En donnant cet exercice à votre élève, il pourra pratiquer l'utilisation des props et des émetteurs d'événements dans Vue.js 3, ainsi que travailler sur la création d'un design responsive avec CSS Grid et Media Queries.