Comment gérer les événements dans Vue

L’écoute des événements utilisateur fait partie intégrante de toute application web réactive, et les applications Vue ne font pas exception. Vue est construit avec un moyen simple et efficace de gérer les événements avec sa directive v-on.

Qu’est-ce que la liaison événementielle dans Vue ?

La liaison d’événements est une fonctionnalité de Vue.js qui vous permet d’attacher un écouteur d’événements à un élément du modèle d’objet de document (DOM). Lorsqu’un événement se produit, l’écouteur d’événement déclenche une action ou une réponse dans votre application Vue.

Vous pouvez créer des liens avec des événements dans Vue à l’aide de la fonction v-on . Cette directive permet à votre application d’écouter les événements utilisateur tels que les événements click, enter ou key-up.

Pour attacher un écouteur d’événements à un élément en utilisant la directive v-on ajoutez le nom de l’événement en tant que paramètre de la directive :

Le bloc de code ci-dessus montre un exemple d’application Vue qui écoute un événement clic . Le bloc de code utilise un événement bouton pour incrémenter l’événement compteur dans la propriété data de l’instance Vue.

Le bloc de code ci-dessus lie l’expression JavaScript compteur++ à l’expression clic avec l’événement v-sur . Vue utilise la directive @ pour remplacer le caractère v-on en raison du caractère v-on est fréquemment utilisé :

La liaison d’événements dans Vue ne se limite pas aux événements de clic. Vue gère d’autres événements, comme les événements de pression de touche, les événements de survol de la souris, et plus encore.

Pour lier l’un de ces événements à l’élément v-on remplacez la directive click par le nom de l’événement souhaité :

Le code ci-dessus met en place un récepteur d’événements sur l’événement bouton qui écoute l’événement touche . Lorsqu’une touche est pressée alors que le bouton est au centre de l’attention, Vue évalue l’événement compteur++ expression.

Lier des événements à des méthodes dans Vue

Dans la plupart des applications Vue, vous pouvez gérer une logique plus complexe basée sur des événements spécifiques. Les événements et les méthodes fonctionnent main dans la main pour exécuter les actions de l’application en fonction d’un événement.

La propriété methods de l’objet Options de Vue contient des fonctions importantes dont votre application Vue a besoin pour améliorer sa réactivité. Grâce à la propriété methods de Vue, vous pouvez gérer une logique complexe basée sur des événements.

Voici un exemple d’application Vue qui montre les événements gérés par la propriété methods :

L’application Vue ci-dessus montre comment lier les événements aux méthodes. L’application comporte deux boutons sur lesquels les utilisateurs peuvent cliquer pour augmenter ou réduire la valeur du compteur dans la propriété data.

L’application y parvient grâce à la propriété @click . La directive @click pointe vers les fonctions de la propriété methods pour manipuler la valeur du compteur.

Lorsque vous associez un argument à l’événement click, vous pouvez personnaliser les méthodes increment et reduce pour ajouter ou réduire la valeur du compteur en fonction de l’argument que vous transmettez à la méthode.

Par exemple :

Ce bloc de code s’étend sur l’application Vue précédente pour permettre le passage d’arguments aux méthodes liées à l’écouteur de l’événement click sur le bouton.

Les méthodes increment et reduce dans l’instance Vue prennent un argument num pour augmenter ou réduire la propriété counter.

Cet exemple montre comment vous pouvez travailler avec des arguments lorsque vous liez des méthodes à des événements dans Vue. Lier des méthodes à des événements peut contribuer à rendre les applications Vue plus interactives.

Exploration des modificateurs Prevent et Stop dans Vue

Les modificateurs d’événements dans Vue vous permettent de créer de meilleurs écouteurs d’événements qui répondent aux besoins spécifiques de votre application. Pour utiliser ces modificateurs d’événements, vous les enchaînez à des événements dans Vue.

Par exemple :

Le bloc de code ci-dessus enchaîne l’événement empêchent à l’événement de soumission. Le modificateur empêcher est couramment utilisé lorsqu’on travaille avec des formulaires dans Vue.

Le modificateur empêche a pour but d’empêcher le comportement par défaut de la soumission d’un formulaire, qui consiste à recharger la page. L’utilisation du modificateur empêcher Vue peut poursuivre ses processus pendant que le modificateur handleSubmit s’occupe de la soumission du formulaire.

Un autre exemple de modificateur très utile est la méthode stop est un autre exemple de modificateur très utile. Le modificateur d’événement stop empêche un événement de se propager plus haut dans l’arbre DOM.

Habituellement, l’événement d’un élément enfant HTML se propage dans l’arbre DOM, activant tous les récepteurs d’événements attachés aux éléments parents. Vous pouvez empêcher cette propagation d’événement avec le modificateur d’événement stop et empêcher l’événement de déclencher d’autres récepteurs d’événements.

Pour comprendre comment le modificateur arrêter arrête la propagation d’événements plus haut dans l’arbre DOM, considérez le bloc de code ci-dessous :

Le bloc de code ci-dessus comporte trois récepteurs d’événements attachés à trois éléments différents. Le bouton se trouve à l’intérieur de la div avec l’élément interne tandis que la div avec la classe interne se trouve à l’intérieur de la div avec la classe externe extérieure.

Chacun des trois éléments est à l’écoute d’une clic et enregistre dans la console le nom de l’élément HTML cliqué. Vous trouverez ci-dessous un style CSS de classe supplémentaire pour faciliter la compréhension du bloc de code ci-dessus :

Lors de l’exécution du programme, l’application Vue créée ressemblera à ceci :

Notez que lorsque vous cliquez sur le bouton, le programme appelle la fonction buttonClick et envoie un message à la console. Le programme appelle également la méthode innerClick de la méthode innerClick .

Cependant, le programme n’appelle pas la fonction outerClick car le bloc de code a ajouté une méthode stop à la méthode innerClick qui écoute l’événement. Cela empêche l’événement de se propager plus haut dans l’arbre DOM.

Sans l’écouteur d’événement arrêter le programme appellera le modificateur boutonClick lorsque vous cliquerez sur le bouton, et l’événement continuera à se propager dans l’arbre, atteignant la méthode innerClick puis la méthode outerClick

Gestion des événements dans les applications Web

Vous avez appris à utiliser la liaison d’événements dans Vue pour attacher des récepteurs d’événements aux éléments et à appeler des méthodes lorsque des événements se produisent. Vous avez également compris comment utiliser les modificateurs d’événements pour personnaliser le comportement des événements.

Les applications Web s’appuient sur une certaine forme d’événements utilisateur pour exécuter des fonctions. JavaScript est doté d’un grand nombre de méthodes pour capturer et gérer une variété de ces événements. Ces événements permettent de créer des applications interactives.

S’abonner à notre lettre d’information