# 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](https://classroom.github.com/a/wbeFruIa) 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 :

{% content-ref url="../vue.js/demo-dintroduction-a-vue" %}
[demo-dintroduction-a-vue](https://divtec.gitbook.io/dev-web/javascript/vue.js/demo-dintroduction-a-vue)
{% endcontent-ref %}

### ✅ Devoirs

1. Faire le tutoriel [Vue Mastey - Intro to Vue 3 (EN)](https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3)

### 📒 Supports de cours supplémentaires

1. [Vue Mastey - Intro to Vue 3 (EN)](https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3)
2. [Vue.js Documentation (FR)](https://fr.vuejs.org/guide/introduction)
3. [OpenClassrooms : Introduction à Vue.js (FR)](https://openclassrooms.com/fr/courses/6390311-creez-une-application-web-avec-vue-js)