Démo d'introduction à Vue

Création d'un dépôt pour la démo : https://classroom.github.com/a/wbeFruIa

Étape 1 : Initialisation de Vue.js

🚀 Objectif : Créer une première application Vue.js et afficher un message réactif.

Ajouter Vue 3 via un CDN

Qu'est-ce qu'un CDN ? – Le CDN expliqué – AWSAmazon Web Services, Inc.

Pour ceux qui ignorent ce qu'est un CDN

Ajouter le code suivant dans le fichier index.html juste avant l'inclusion du fichier script.js, qui contiendra le code de notre application Vue.

<!-- Inclusion de Vue 3 dernière version -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Créer une instance Vue

Nous allons créer une nouvelle application Vue dans le fichier script.js.

Le code suivant va créer cette nouvelle application et la crocher sur la div #poke-app.

Cela veut-dire que tout ce qui est contenu dans <div id="poke-app">...</div> sera contrôlé par Vue.

const { createApp } = Vue; // Récupère la méthode pour créer un nouvelle app Vue

const app = createApp({
  setup() {
    // Déclaration des données (data) Vue
    const message = "Bienvenue dans PokeCount!";
    
    // Toutes les données retournées seront accessible dans le HTML
    return { 
      message
    };
  }
}).mount("#poke-app"); // Monte l'application sur la div #poke-app

Utiliser l'interpolation dans le HTML

Maintenant que l'application Vue existe, on peut accéder aux données retournées directement dans le HTML.

Dans le HTML, utilisez la syntaxe {{ message }} n'importe où à l'intérieur de <div id="poke-app"> pour afficher le contenu de la donnée message.

On peut, par exemple, remplacer le contenu du titre principal <h1> avec la donnée message.

<h1>{{ message }}</h1>

Afficher le contenu d'une donnée dans la console du navigateur

Pour afficher le contenu de la donnée message dans la console, taper cette commande.

app.message; // "Bienvenue dans PokeCount!"

---

Étape 2 : Réactivité avec ref

🚀 Objectif : Ajouter un compteur réactif pour capturer des Pokémon.

La donnée message que nous venons de créer n'est pas réactive. Si on modifie sa valeur, elle ne se met pas à jour automatiquement dans le HTML.

Pour essayer, taper cette commande dans la console du navigateur.

app.message = "Bulbizarre"; 

Rien ne se passe, le contenu de notre <h1> n'a pas changé 😢.

Déclarer une valeur réactive avec ref()

C'est bien la valeur qui sera réactive et non la donnée elle-même.

Pour déclarer une valeur réactive, nous avons besoin de la méthode ref(). Cela va référencer une valeur qui sera analysée en permanence par Vue. Vue répercutera immédiatement les modifications de cette valeur partout dans l'application, que ce soit dans le JavaScript ou le HTML.

Importer ref() depuis Vue

Comme pour createApp, nous allons importer ref depuis Vue. Il faut donc ajouter ref à la ligne des importation Vue, sans oublier de séparer les méthodes avec une virgule.

const { createApp, ref } = Vue; // importe createApp et ref de Vue

Créer une donnée réactive

Nous allons créer une nouvelle donnée compteur et lui affecter une valeur réactive initialisée à 0.

Ajouter ce code juste après la création de la donnée message.

const compteur = ref(0); // Donnée avec valeur réactive initialisée avec 0

Afficher le compteur et ajouter un bouton

Dans le fichier index.html, modifier le code de <div class="captures"> en y ajoutant la donnée compteur.

<div class="captures">Pokémons capturés: {{ compteur }}</div>

Modifier la valeur de la donnée compteur

Taper la commande suivante dans la console de votre navigateur et vous devriez voir le compteur changer dans le HTML.

app.compteur = 5; 

YES 🎉 Le compteur, c'est actualisé 😀

Dans le fichier index.html, utilisez v-on ou @click pour capturer un Pokémon.

<p>Pokémons capturés : {{ compteur }}</p>
<button @click="capturer">Capturer 🐢</button>

Incrémenter le compteur

Créez une fonction pour capturer des Pokémon et incrémenter le compteur.

function capturer() {
  compteur.value += 1;
}

---

Étape 3 : Sauvegarder les captures

🚀 Objectif : Ajouter une fonctionnalité pour sauvegarder les captures.

1. Créer une liste réactive pour stocker les captures Utilisez ref pour créer une liste réactive des captures.

   const capturesTab = ref([]);

2. Créer la fonction sauver Créez une fonction qui ajoute le compteur à la liste des captures et réinitialise le compteur.

   function sauver() {
     if (compteur.value > 0) {
       capturesTab.value.push(compteur.value);
       compteur.value = 0;
     }
   }

3. Activer/Désactiver le bouton "Sauver" Utilisez v-bind:disabled pour désactiver le bouton si le compteur est à zéro.

   <button @click="sauver" :disabled="compteur === 0">Sauver 💾</button>

---

Étape 4 : Afficher les captures dans une liste

🚀 Objectif : Afficher les captures dans une liste et gérer le cas où la liste est vide.

1. Boucler avec v-for Utilisez v-for pour parcourir les éléments de la liste et les afficher.

   <ul>
     <li v-for="(capture, index) in capturesTab" :key="index">
       {{ capture }} Pokémon capturé(s)
     </li>
   </ul>

2. Gérer le cas où la liste est vide avec v-if Ajoutez une condition pour afficher un message si la liste est vide.

   <p v-if="capturesTab.length === 0">Aucune capture pour le moment.</p>

---

Étape 5 : Suppression de toutes les captures

🚀 Objectif : Permettre aux utilisateurs de supprimer toutes les captures avec un bouton.

1. Ajouter un bouton de suppression Ajoutez un bouton qui réinitialise la liste des captures.

   <button @click="capturesTab = []" :disabled="capturesTab.length === 0">
     Supprimer toutes les captures 🗑️
   </button>

---

Étape 6 : Suppression des captures avec un double-clic

🚀 Objectif : Permettre aux utilisateurs de supprimer une capture spécifique en double-cliquant dessus.

1. Utiliser @dblclick pour supprimer une capture Utilisez l'événement dblclick pour supprimer un élément spécifique de la liste.

   <li v-for="(capture, index) in capturesTab" :key="index" @dblclick="capturesTab.splice(index, 1)">
     {{ capture }} Pokémon capturé(s)
   </li>

---

Étape 7 : Calculer le total des Pokémon capturés avec computed

🚀 Objectif : Calculer et afficher le total des Pokémon capturés.

1. Utiliser computed pour calculer le total Ajoutez une propriété calculée qui retourne la somme des captures.

   const totalPokemons = computed(() => {
     return capturesTab.value.reduce((total, capture) => total + capture, 0);
   });

2. Afficher le total dans le HTML Affichez dynamiquement le total des Pokémon capturés.

   <p>Total des Pokémon capturés : {{ totalPokemons }}</p>

---

Étape 8 : Persister les données avec localStorage

🚀 Objectif : Sauvegarder les captures dans localStorage pour les récupérer après un rechargement.

1. Sauvegarder dans localStorage lors de la sauvegarde Ajoutez la persistance dans localStorage à chaque sauvegarde.

   function sauver() {
     if (compteur.value > 0) {
       capturesTab.value.push(compteur.value);
       localStorage.setItem('captures', JSON.stringify(capturesTab.value));
       compteur.value = 0;
     }
   }

2. Charger les données depuis localStorage au chargement Utilisez onMounted pour récupérer les données stockées au chargement de la page.

   onMounted(() => {
     const savedCaptures = JSON.parse(localStorage.getItem('captures'));
     if (savedCaptures) capturesTab.value = savedCaptures;
   });

---

Étape 9 : Utiliser v-model pour un champ de saisie

🚀 Objectif : Permettre aux utilisateurs d'entrer manuellement le nombre de Pokémon capturés.

1. Ajouter un champ de saisie avec v-model Utilisez v-model pour lier la valeur du champ de saisie au compteur.

   <input v-model.number="compteur" type="number" />

2. Valider l'entrée Le bouton "Sauver" ne sera activé que si la saisie est correcte.

   <button @click="sauver" :disabled="isNaN(compteur) || compteur < 1">Sauver 💾</button>
   <p v-if="isNaN(compteur) || compteur < 1" class="error">
     Veuillez entrer un nombre valide supérieur à 0.
   </p>

---

Étape 10 : Utilisation de localStorage et onMounted pour persister les données

🚀 Objectif : Sauvegarder les captures dans le navigateur et récupérer les données à chaque chargement.

1. Persister les données avec localStorage Sauvegardez chaque capture dans localStorage avec setItem.

2. Récupérer les captures lors du chargement Utilisez onMounted pour charger les données.

---

Étape 11 : Utiliser les watchers et le class binding

🚀 Objectif : Utiliser un watcher pour changer la couleur du bouton "Capturer" lorsque le compteur dépasse 5.

1. Utiliser un watch pour surveiller le compteur Ajoutez un watcher pour observer le compteur et activer une classe CSS conditionnellement.

   watch(compteur, (newVal) => {
     ilFautSauvegader.value = newVal > 5;
   });

2. Ajouter une classe dynamique Modifiez la classe du bouton en fonction de la valeur du compteur.

   <button @click="capturer" :class="{ chaud: ilFautSauvegader }">
     Capturer 🐢
   </button>

   Ajoutez un style CSS pour la classe chaud :

   button.chaud {
     background: #e74c3c; /* Rouge */
   }

---

Étape 12 : Confirmation sur clic avec @click.prevent

🚀 Objectif : Ajouter une confirmation avant de naviguer vers une nouvelle page.

1. Empêcher la navigation automatique et ajouter une confirmation Utilisez @click.prevent pour intercepter le

clic sur un lien et demander confirmation.

<a href="https://www.pokemon.com/fr/pokedex" @click.prevent="verifierAvantDeQuitter">
  Ouvrir le Pokédex
</a>

1. Ajouter la fonction de confirmation Utilisez confirm() pour demander confirmation avant de naviguer.

   function verifierAvantDeQuitter(event) {
     const confirmation = confirm("Avez-vous bien sauvegardé vos captures ?");
     if (confirmation) {
       window.location.href = event.target.href;
     }
   }

---

Étape 13 : Valider la saisie avec la touche Entrée

🚀 Objectif : Sauvegarder les Pokémon capturés en appuyant sur la touche Entrée.

1. Écouter la touche Entrée avec @keyup.enter Ajoutez un écouteur pour la touche Entrée sur le champ de saisie.

   <input v-model.number="compteur" type="number" @keyup.enter="sauver" />

---

Étape 14 : Utiliser ref pour récupérer un élément HTML

🚀 Objectif : Redonner le focus à l'input après chaque sauvegarde.

Comment récupérer un élément HTML pour le manipuler en JavaScript ?

En JavaScript

On met un id à l'élément HTML qu'on veut récupérer.

<h1 id="pokedex">Mon Pokédex</h1>

Puis on utilise la méthode document.getElmentById() oudocument.querySelector().

const h1Pokedex = document.getElementById("pokedex");

Avec Vue

On n'ajoute pas un id, mais un ref pour identifier l'élément qu'on veut manipuler.

<h1 ref="pokedex">Mon Pokédex</h1>

Ensuite, on récupère l'élément HTML avec la méthode useTemplateRef().

<script setup>
import { useTemplateRef } from 'vue';

// Récupère l'élément HMTML grâce à useTemplateRef()
const h1Pokedex = useTemplateRef("pokedex");
</script>

Attendre que le composant soit monté

Il faut attendre que le composant soit monté onMounted pour pouvoir manipuler l'élément HTML, car avant il n'existera simplement pas.

Utiliser .value pour récupérer l'élément HTML

Comme pour les autres donnée réactives ref() il faut utiliser .value pour accéder à la valeur.

h1Pokedex.value.textContent = "Mon Pokédex";

<script setup>
import { useTemplateRef, onMounted } from 'vue';

// Récupère l'élément HMTML grâce à useTemplateRef()
const h1Pokedex = useTemplateRef("pokedex");

// On doit attendre que le composant soit monté
// avant de pouvoir utiliser l'élément HTML
onMounted(() => {
  // Modifie le contenu texte 
  h1Pokedex.value.textContent = "Mon Pokédex";
  // Modifie le style CSS
  h1Pokedex.value.style.color = "#fac100";
});
</script>

Démo

Application

1. Ajouter ref à l'input

   <input v-model.number="compteur" ref="inputCapture" type="number" />

2. Importer useTemplateRef depuis Vue

   const { createApp, ref, computed, onMounted, watch, useTemplateRef } = Vue;

3. Récupérer l'input

   const inputCapture = useTemplateRef("inputCapture");

4. Redonner le focus après la sauvegarde Utilisez refs.inputCapture.focus() après chaque sauvegarde pour redonner le focus à l'input.

   function sauver() {
     if (!isNaN(compteur.value) && compteur.value > 0) {
       capturesTab.value.push(compteur.value);
       compteur.value = 0;
       inputCapture.value.focus();
     }
   }