Prompt Title: Vue.js 3 Exercise

Created 11 months ago
Votes 0
Views 146 times
0
Human: J'aimerai faire un exercice a un de mes eleve a vue js 3 de comment utiliser les emits et les props ainsi que lui faire bosser la partie responsive ( en grid et media queries )
ChatGPT:

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 :

markdown
- 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.

avatar
f
Shared 9 prompts
Created 11 months ago

Leave a Comment

Related Tag Prompts

94
0
151
0
Docker Pro
1 year ago 2023-01-29 06:08:59 AIPRM
308
0
MySQL Marvel
1 year ago 2023-02-13 00:05:32 AIPRM
260
0
Ansible Expert
1 year ago 2023-02-01 09:23:50 AIPRM
193
0
PostgreSQL Pro
1 year ago 2023-02-07 03:45:19 AIPRM
114
0
270
1
Dockerize me
1 year ago 2023-02-17 08:27:58 Chad Thompson-Smith