📅17 septembre

🚀 Objectifs du jour

• Finaliser l'exercice Mini Pokédex

• Découverte de Vue.js : Comprendre les bases de ce framework JavaScript moderne pour créer des interfaces interactives.

• Mise en place d'une application simple avec Vue.js

📒 Exercice Mini Pokédex

1. Présentation du code final avec Vue.js :

   • Introduction à l'utilisation de Vue.js via un CDN (Content Delivery Network).

   • Explication des concepts de base : réactivité, ref(), computed(), v-model, et directives comme v-if, v-for.

   • Mise en place des fonctions pour capturer et sauvegarder les Pokémon, et afficher le total des captures.

2. Présentation du projet final :

   • Fichier HTML : Liaison des composants Vue.js avec la structure HTML de l'application.

   • Fichier JavaScript : Utilisation de la Composition API pour créer une logique réactive sans installer Vue CLI.

   • Fichier CSS : Stylisation de l'interface avec des effets dynamiques pour les boutons et les éléments interactifs.

🛠 Intro à Vue.js — dépôt de la démo

1. Créer le dépôt GitHub via GitHub Classroom : Utilise ce lien pour cloner le dépôt de départ avec l'intégration de Vue.js sans Vue CLI.

2. Cloner le dépôt avec WebStorm :

   • Utilise l'URL de ton dépôt pour cloner le projet dans WebStorm.

3. Structure des fichiers à cloner :

   • index.html : Contient la structure HTML avec l'intégration de Vue.js via un CDN.

   • script.js : Contient le code JavaScript qui gère la réactivité de l'application avec la Composition API de Vue.js.

   • style.css : Fichier CSS qui stylise l'interface avec des transitions et des animations pour améliorer l'expérience utilisateur.

La suite sur cette page :

Démo d'introduction à Vue

✅ Devoirs

1. Faire le tutoriel Vue Mastey - Intro to Vue 3 (EN)

📒 Supports de cours supplémentaires

1. Vue Mastey - Intro to Vue 3 (EN)

2. Vue.js Documentation (FR)

3. OpenClassrooms : Introduction à Vue.js (FR)