Vue : construire une application web (école d'ingénieur) · Chapitre 2 · Exercice de TD
Modificateurs
Gabarits et directives · niveau 2
Énoncé
Avec la page suivante, qu'affiche la console après un clic sur « Ajouter », puis sur « Favori », sur « Fiche », sur le titre « Programmation Java », et enfin deux clics sur « Offre » ? La page change-t-elle ?
<div id="app">
<div id="carte" @click="noter('carte')">
<p>Programmation Java</p>
<button type="button" @click="noter('ajouter')">Ajouter</button>
<button type="button" @click.stop="noter('favori')">Favori</button>
<a href="livre.html" @click.prevent="noter('lien')">Fiche</a>
</div>
<button type="button" @click.once="noter('une fois')">Offre</button>
</div>Corrigé
--- Ajouter
clic : ajouter
clic : carte
--- Favori
clic : favori
--- Fiche
clic : lien
clic : carte
--- le titre
clic : carte
--- Offre, deux fois
clic : une fois
page : index.htmlLe clic sur « Ajouter » remonte jusqu'à la carte : deux lignes. .stop arrête la remontée pour « Favori ». .prevent empêche le lien de quitter la page, mais pas la remontée : la carte réagit aussi. « Offre » ne réagit qu'au premier clic, et la page est restée la même.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.