Aller au contenu

Vue — Composante like-button

Fichiers de départ

📥 Télécharger fichiers de départ

Aperçu du résultat

Une page affiche une petite liste de jeux rétros. À côté de chaque élément, un bouton “❤️ J’aime” (composante réutilisable) permet d’alterner entre aimé / pas aimé — indépendamment pour chaque instance.

Objectifs

  • Créer et réutiliser une composante Vue simple
  • Manipuler une prop (initial) et un état propre à chaque bouton (isLiked)
  • Utiliser les classes dynamiques et le rendu conditionnel
  • Structurer une petite app avec composante simple (importation via CDN, Vue 3 avec Options API)

Fichiers

  • index.html — structure HTML + montage de l’app
  • style.css — styles du layout et du bouton
  • script.js — app Vue + composante like-button

Étapes

  • 1. Vue : Installez Vue 3 via CDN (pas besoin d'utiliser npm ni de l'outil de développement Vite pour cet exercice).
  • 2. HTML : Ouvrez index.html dans votre navigateur
  • 3. Parent : Créez une app Vue. Créez les données initiales pour les 4 jeux. Affichez les dans la section.list.
  • 4. Composante : Créez ensuite la composante like-button :
    • une prop nommée initial (booléen) qui permet d'établir l'état initial si le jeu est aimé ou non,
    • une donnée data() nommée isLiked qui sera égale à la valeur de la prop initial,
    • une méthode toggle() appelée avec @click,
    • une classe dynamique :class="{ liked: isLiked }" et un emoji conditionnel.
  • 5. Réutilisation : Vérifiez que chaque instance du bouton est indépendante (essayez plusieurs clics sur différentes lignes).
  • 6. Styles : Personnalisez le CSS (état normal vs .liked, hover/focus).

Bonus

  • Remplacer les emojis par des icônes (★/☆) ou SVG.
  • Ajouter un petit texte conditionnel (“Merci !”).
  • Ajouter une prop label pour rendre le texte configurable.

Critères de complétion

  • L’app Vue 3 fonctionne (aucune erreur dans la console)
  • La composante like-button est réutilisée au moins 3 fois
  • La prop initial est respectée, avec valeur par défaut false
  • Les classes dynamiques changent l’apparence du bouton (.liked)
  • Le code est clair, indenté et commenté minimalement

Notes de cours 📚