Lorsque vous utilisez Vue Vue avec les modificateurs d'événements, le framework enveloppe la fonction de gestionnaire avec une logique supplémentaire pour appliquer le comportement spécifié. Par exemple, lorsque vous utilisez .Prevent, Vue appelle automatiquement Event.PreventDefault () avant d'exécuter le gestionnaire, empêchant les actions par défaut comme la soumission de formulaire. Les modificateurs communs incluent .Stop (appels event.stoppropagation ()), .prevent (empêche l'action par défaut), .capture (écoute pendant la phase de capture), .self (déclenche uniquement si la cible est l'élément lui-même), .once (exécute une fois) et .passive (optimise les performances). Les modificateurs peuvent être encha?nés, et Vue les applique dans un ordre interne spécifique, où certains affectent la pièce jointe de l'écoute (comme .Capture et .Passive) tandis que d'autres modifient l'exécution du gestionnaire. Surtout, .Passive ne doit pas être utilisé avec EmptiserDefault (),. Unce fonctionne avec les gestionnaires asynchrones, et. Ces modificateurs rationalisent la gestion des événements en éliminant le code de la baillit et en permettant un contr?le précis sur le comportement des événements.

Le système de gestion des événements de Vue est construit sur les événements DOM natifs mais ajoute une couche de commodité grace à des directives comme v-on . Lorsque vous utilisez des modificateurs tels que .prevent , .stop ou .once , Vue gère ceux dans les coulisses en enveloppez votre fonction de gestionnaire avec une logique supplémentaire. Décomposons-le de manière pratique.

Que se passe-t-il lorsque vous utilisez v-on avec un modificateur d'événement?

Lorsque vous écrivez quelque chose comme:

 <form @ soumed.prevent = "handlesubmit"> </ form>

Vue n'attache pas simplement votre fonction handleSubmit directement à l'événement submit du formulaire. Au lieu de cela, il génère du code qui enveloppe votre gestionnaire et applique d'abord la logique du modificateur.

Dans ce cas, .prevent dit à Vue d'appeler event.preventDefault() avant d'exécuter votre gestionnaire. Ceci est utile pour les formulaires où vous ne voulez pas que la page recharge.

Sous le capot, Vue crée une fonction de wrapper comme:

 fonction enveloppéhandler (événement) {
  event.PreventDefault ();
  Retour OriginalHandler (événement);
}

Ainsi, la commande compte: le modificateur s'exécute devant votre gestionnaire réel.

Modificateurs d'événements communs et ce qu'ils font

Voici quelques-uns des modificateurs les plus utilisés et comment ils fonctionnent:

• .stop - appelle event.stopPropagation() , empêchant l'événement de bouillonner aux éléments parents.
• .prevent - Appels event.preventDefault() , arrêtant l'action par défaut (comme la soumission de formulaire ou la navigation de lien).
• .capture - Ajoute l'auditeur d'événements dans la phase de capture au lieu de la phase bouillonnante.
• .self - ne déclenche le gestionnaire que si la cible de l'événement est l'élément lui-même, pas un enfant.
• .once - s'assure que le gestionnaire ne fonctionne qu'une seule fois, puis se supprime.
• .passive - indique au navigateur que le gestionnaire n'appellera pas preventDefault() , qui aide les performances sur les événements Touch / Mobile.

Vous pouvez encha?ner ces modificateurs, comme @click.stop.prevent .

Comment Vue applique plusieurs modificateurs ensemble

Si vous avez plus d'un modificateur, Vue les applique dans un ordre spécifique en interne. Par exemple:

 <div @ click.stop.self = "DoSomething"> </div>

Cela arrêtera d'abord la propagation, puis vérifiez si la cible est la même que l'élément.

Mais note: l'ordre dans le modèle ne correspond pas toujours à l'ordre d'exécution. Certains modificateurs affectent la fa?on dont l'auditeur est attaché plut?t que le gestionnaire lui-même (comme .capture ), ils sont donc manipulés différemment.

Il est généralement prudent de supposer que Vue s'occupe de la séquence correcte, mais il est bon de savoir que .passive et .capture affectent les options d'écoute d'événements, tandis que d'autres modifient la fonction du gestionnaire.

Quelques détails importants à retenir

• Les modificateurs comme .passive doivent être utilisés avec soin. Si vous utilisez .passive , vous ne devriez pas appeler preventDefault() à l'intérieur de votre gestionnaire, ou il peut lancer une erreur dans certains navigateurs.
• Le modificateur .once fonctionne bien avec les opérations asynchrones - il supprime l'auditeur après le premier déclencheur, même si le gestionnaire est asynchrone.
• L'utilisation .self avec des éléments profondément imbriqués peut aider à prévenir le déclenchement involontaire des enfants.
• Vous pouvez également utiliser des modificateurs avec des événements dynamiques: v-on:[event].once="handler" .

Fondamentalement, les modificateurs d'événements de Vue vous donnent un contr?le fin sur le comportement des événements sans écrire plus de passe-partout dans vos méthodes. Ils facilitent les modèles communs et gardent votre code propre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!