Exercices Template & Directives

Tâche : Crée un bloc conditionnel avec v-if et v-else : affiche "Bienvenue !" si estConnecte est true, sinon "Veuillez vous connecter." Ajoute un bouton pour basculer.

<div id="app"> <!-- Utilise v-if et v-else ici --> <p>Bienvenue !</p> <p>Veuillez vous connecter.</p> <button>Toggle connexion</button> </div> <script> createApp({ data() { return { estConnecte: false }; } }).mount('#app'); </script>

Tâche : Crée un panneau avec v-show et un bouton @click qui bascule la variable booléenne. Explique pourquoi v-show est mieux que v-if pour ce cas.

<div id="app"> <button @click="???">Afficher / Masquer</button> <!-- Utilise v-show ici --> <div> <p>Contenu togglable</p> </div> </div> <script> createApp({ data() { return { visible: true }; } }).mount('#app'); </script>

Tâche : Utilise v-for pour afficher un tableau de tâches (id, titre, statut). N'oublie pas :key="tache.id" sur chaque élément.

<div id="app"> <ul> <!-- v-for sur le tableau taches avec :key --> </ul> </div> <script> createApp({ data() { return { taches: [ { id: 1, titre: 'Apprendre Vue', statut: '✅' }, { id: 2, titre: 'Faire les exos', statut: '⏳' }, { id: 3, titre: 'Finir le projet', statut: '📋' } ] }; } }).mount('#app'); </script>

Tâche : Crée un bouton dont la classe actif s'ajoute quand selectionne est true. Utilise la syntaxe objet de :class.

<div id="app"> <!-- :class avec objet { 'actif': selectionne } --> <button @click="selectionne = !selectionne"> {{ selectionne ? 'Sélectionné' : 'Non sélectionné' }} </button> </div> <style> .actif { background: #42b883; color: #000; } </style>

Tâche : Affiche un score dont la couleur change selon la valeur : vert si ≥ 10, rouge sinon. Utilise :style avec un objet et une expression ternaire.

<div id="app"> <input v-model.number="score" type="range" min="0" max="20"> <!-- :style avec couleur conditionnelle --> <p>Score : {{ score }} / 20</p> </div> <script> createApp({ data() { return { score: 12 }; } }).mount('#app'); </script>

Tâche : Crée un bouton @click et un formulaire @submit.prevent. Le formulaire doit afficher un message de confirmation sans recharger la page.

<div id="app"> <button @click="compteur++">Clics : {{ compteur }}</button> <!-- Formulaire avec @submit.prevent --> <form> <input v-model="nom" placeholder="Votre nom"> <button type="submit">Envoyer</button> </form> <p>{{ message }}</p> </div>

Tâche : Crée un input avec v-model="texte" et affiche en dessous la valeur, sa longueur, et sa version en majuscules. Tout doit se mettre à jour en temps réel.

<div id="app"> <input v-model="texte" placeholder="Tapez..."> <!-- Affiche texte, texte.length, texte.toUpperCase() --> </div> <script> createApp({ data() { return { texte: '' }; } }).mount('#app'); </script>

Tâche : Crée un <select> avec v-model ET des cases à cocher type="checkbox" avec v-model. Affiche les valeurs sélectionnées.

<div id="app"> <!-- Select avec v-model --> <select> <option value="fr">France</option> <option value="be">Belgique</option> </select> <p>Pays : {{ pays }}</p> <!-- Checkboxes avec v-model (tableau) --> <input type="checkbox" value="Rouge"> Rouge <input type="checkbox" value="Bleu"> Bleu <p>Couleurs : {{ couleurs }}</p> </div>

Tâche : Démontre .stop et .prevent : un bouton enfant avec @click.stop ne doit pas déclencher le @click du parent. Un lien avec @click.prevent ne doit pas naviguer.

<div id="app"> <!-- Div parent avec @click --> <div @click="action = 'Parent cliqué'" style="padding:2rem;background:rgba(255,100,100,0.1);cursor:pointer"> Zone parent <!-- Bouton enfant avec @click.stop --> <button @click="action = 'Bouton cliqué'">Sans .stop</button> </div> <!-- Lien avec @click.prevent --> <a href="https://google.com" @click="action = 'Lien cliqué'">Lien sans .prevent</a> <p>{{ action }}</p> </div>

Tâche : Crée une liste de 6 items avec catégorie. Des boutons filtrent la liste avec v-for + v-if. Un @click sur chaque item le sélectionne. Utilise :class pour l'item actif.

<div id="app"> <!-- Boutons de filtre avec v-for --> <!-- Liste avec v-for + v-if + @click + :key --> <p>Sélectionné : {{ selectionne?.nom || 'aucun' }}</p> </div> <script> createApp({ data() { return { filtre: 'Tous', selectionne: null, categories: ['Tous', 'Nature', 'Tech'], items: [ { id:1, nom:'Forêt', emoji:'🌲', categorie:'Nature' }, { id:2, nom:'Montagne', emoji:'⛰️', categorie:'Nature' }, { id:3, nom:'Robot', emoji:'🤖', categorie:'Tech' }, { id:4, nom:'Ordi', emoji:'💻', categorie:'Tech' }, { id:5, nom:'Océan', emoji:'🌊', categorie:'Nature' }, { id:6, nom:'Fusée', emoji:'🚀', categorie:'Tech' } ] }; } }).mount('#app'); </script>