0Pricing
Vue Academy · Leçon

Modificateurs d’événements v-on

.stop, .prevent, .self, .once, .capture, .passive — quand et pourquoi utiliser chaque modificateur.

Modificateurs d’événements v-on est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Une gestion plus claire des événements

La directive v-on (abrégée en @) ajoute des écouteurs d’événements. Les modificateurs d’événements sont des suffixes qui prennent en charge des opérations courantes du DOM, comme arrêter la propagation ou empêcher les comportements par défaut, afin que vos gestionnaires restent centrés sur la logique.

Le problème résolu par les modificateurs

Sans modificateurs, vous parsemez vos gestionnaires de code répétitif pour le DOM : appeler event.preventDefault() ou event.stopPropagation(). Les modificateurs déplacent cette logique dans le modèle de manière déclarative.

.stop pour stopPropagation

.stop empêche l’événement de remonter vers les éléments parents — c’est l’équivalent de l’appel à event.stopPropagation().

<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
  <button @click.stop="onInner">Click</button>
</div>

.prevent pour preventDefault

.prevent appelle event.preventDefault(). Son utilisation classique consiste à empêcher un formulaire de recharger la page lors de sa soumission.

<form @submit.prevent="onSubmit">
  <button type="submit">Save</button>
</form>

Combiner les modificateurs

Vous pouvez combiner les modificateurs. L’ordre est important : ils s’appliquent de gauche à droite.

<a @click.stop.prevent="onClick">Link</a>

.self : l’élément lui-même uniquement

.self exécute le gestionnaire uniquement si la cible de l’événement est l’élément lui-même, et non un élément enfant dont l’événement est remonté. C’est très pratique pour les arrière-plans de superposition.

<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
  <div class="modal">...</div>
</div>

Modificateurs de touches

Pour les événements du clavier, vous pouvez écouter des touches précises. @keyup.enter se déclenche uniquement lorsque la touche Entrée est relâchée.

<input @keyup.enter="search" />

Autres modificateurs de touches

Vue fournit des alias pour les touches courantes : .enter, .esc, .tab, .delete, .space, ainsi que les touches fléchées comme .up et .down.

<input @keyup.esc="cancel" @keyup.up="previous" />

.once : n’exécuter un gestionnaire qu’une seule fois

.once exécute le gestionnaire au plus une fois, puis supprime l’écouteur. C’est utile pour les actions ponctuelles, comme fermer un message de bienvenue.

<button @click.once="initialize">Start</button>

.passive pour de meilleures performances de défilement

.passive indique au navigateur que le gestionnaire n’appellera pas preventDefault(). Le navigateur peut ainsi faire défiler la page sans attendre, ce qui améliore les performances lors des événements tactiles et de défilement.

<div @scroll.passive="onScroll">...</div>

Choisir le bon modificateur

  • .stop — arrêter la propagation.
  • .prevent — bloquer le comportement par défaut.
  • .self — ignorer les événements remontés depuis les éléments enfants.
  • .once — exécuter une seule fois.
  • .passive — ne jamais empêcher le comportement par défaut ; améliorer les performances du défilement.

Remarque : ne combinez jamais .passive avec .prevent — ces modificateurs sont contradictoires.

Vérification rapide

Choisissez le bon modificateur.

Récapitulatif

Les modificateurs d’événements permettent de garder des gestionnaires clairs :

  • .stop = stopPropagation, .prevent = preventDefault.
  • .self se déclenche uniquement sur l’élément lui-même.
  • Les modificateurs de touches comme .enter ciblent des touches précises.
  • .once exécute un gestionnaire une seule fois ; .passive améliore les performances du défilement.

Questions Fréquemment Posées

La leçon « Modificateurs d’événements v-on » est-elle gratuite ?

Oui — le texte complet de « Modificateurs d’événements v-on » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modificateurs d’événements v-on » ?

.stop, .prevent, .self, .once, .capture, .passive — quand et pourquoi utiliser chaque modificateur. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Modificateurs d’événements v-on » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. v-model : mécanismes de la liaison bidirectionnelle
  2. Modificateurs d’événements v-on
  3. Liaisons dynamiques et multiples avec v-bind
  4. Écrire des directives personnalisées
← Retour à Vue Academy