Apprenez à améliorer la gestion de vos événements avec la directive v-on de 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 d'événements dans Vue?
La liaison d'événement est une fonctionnalité de Vue.js qui vous permet d'attacher un écouteur d'événement à un Modèle d'objet de document (DOM) élément. 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 obtenir une liaison d'événement dans Vue avec le v-sur directif. Cette directive permet à votre application d'écouter les événements utilisateur tels que les événements de clic, d'entrée ou de frappe.
Pour attacher un écouteur d'événement à un élément à l'aide de v-sur, ajoutez le nom de l'événement en tant que paramètre à la directive :
<html>
<diriger>
<scénariosrc=" https://unpkg.com/vue@3/dist/vue.global.js">scénario>
diriger>
<corps>
<dividentifiant="application">
<boutonv-on: cliquez="compteur++">Cliquez sur moibouton>
<p>{{ comptoir}}p>
div>
<scénario>
constante app = Vue.createApp({
données() {
retour {
texte: 'La vue est géniale!',
compteur: 0
}
}
})
app.mount('#application')
scénario>
corps>
html>
Le bloc de code ci-dessus montre un exemple d'une application Vue qui écoute un Cliquez sur événement. Le bloc de code utilise un bouton pour incrémenter le comptoir value dans la propriété data de l'instance de Vue par un.
Le bloc de code ci-dessus lie l'expression JavaScript compteur++ au bouton Cliquez sur événement avec le v-sur directif. Vue utilise le @ caractère comme raccourci à la place du v-sur directive en raison de v-surUtilisation fréquente de :
<bouton @Cliquez sur="compteur++">Cliquez sur moibouton>
La liaison d'événements dans Vue n'est pas limitée aux événements de clic. Vue gère d'autres événements, tels que les événements d'appui sur les touches, les événements de survol de la souris, etc.
Pour lier l'un de ces événements au v-sur directive, remplacer la Cliquez sur événement avec le nom de l'événement souhaité :
<bouton @keydown.enter="compteur++">Cliquez sur moibouton>
Le code ci-dessus configure un écouteur d'événement sur le bouton qui écoute le touche Bas événement. Lorsqu'une touche est enfoncée alors que le bouton a le focus, Vue évalue le compteur++ expression.
Dans la plupart des applications Vue, vous pouvez gérer une logique plus complexe basée sur des événements spécifiques qui se produisent. Les événements et les méthodes fonctionnent main dans la main pour effectuer des actions d'application en fonction d'un événement.
La propriété method dans Objet Options de Vue contient des fonctions importantes dont votre application Vue a besoin pour une réactivité accrue. Avec la propriété method de Vue, vous pouvez gérer une logique complexe basée sur des événements.
Voici un exemple d'application Vue qui affiche les événements gérés par la propriété methods :
<html>
<diriger>
<scénariosrc=" https://unpkg.com/vue@3/dist/vue.global.js">scénario>
diriger>
<corps>
<dividentifiant="application">
<bouton @Cliquez sur="incrément">Ajouter 1bouton>
<bouton @Cliquez sur="réduire">réduire 1bouton>
<p>{{ comptoir }}p>
div>
<scénario>
const app = Vue.createApp({
données() {
retour {
text: 'La vue est géniale !',
compteur: 0
}
},
méthodes: {
incrément(){
ce.compteur = ce.compteur + 1
},
réduire() {
ce.compteur = ce.compteur - 1
}
}
})
app.mount('#app')
scénario>
corps>
html>
L'application Vue ci-dessus décrit comment lier des événements à des méthodes. L'application comporte deux boutons sur lesquels les utilisateurs peuvent cliquer pour incrémenter ou réduire la valeur du compteur dans la propriété data.
L'application y parvient avec le @Cliquez sur directif. Le @Cliquez sur La directive pointe vers les fonctions de la propriété method pour manipuler la valeur du compteur.
Lorsque vous liez un argument à l'événement click, vous pouvez personnaliser les méthodes d'incrémentation et de réduction pour ajouter ou réduire la valeur du compteur en fonction de l'argument que vous transmettez à la méthode.
Ainsi:
<corps>
<dividentifiant="application">
<bouton @Cliquez sur="incrément (5)">Ajouter 5bouton><bouton @Cliquez sur="réduire (3)">réduire 3bouton>
<p>{{ comptoir }}p>
div><scénario>
const app = Vue.createApp({
données() {
retour {
text: 'La vue est géniale !',
compteur: 0
}
},
méthodes: {
incrément (nombre){
this.counter = this.counter + num
},
réduire (nombre) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
scénario>
corps>
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 d'événement click sur le bouton.
Les méthodes incrément et réduire dans l'instance de Vue prennent un argument num pour augmenter ou réduire la propriété counter.
Cet exemple montre comment vous pouvez travailler avec des arguments lors de la liaison de méthodes avec des événements dans Vue. Lier des méthodes à des événements peut aider à rendre les applications Vue plus interactives.
Explorer les 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 enchaînez les modificateurs aux événements dans Vue.
Par exemple:
<former @soumettre.empêcher="handleSubmit">
<saisirtaper="texte"modèle en V="texte">
<boutontaper="soumettre">Soumettrebouton>
former>
Le bloc de code ci-dessus enchaîne les prévenir modificateur à l'événement submit. Le prévenir Le modificateur est couramment utilisé lorsque vous travaillez avec des formulaires dans Vue.
Le prévenir Le but du modificateur est d'empêcher le comportement par défaut de la soumission de formulaire, qui consiste à recharger la page. En utilisant prévenir, Vue peut poursuivre ses processus pendant que le gérerSoumettre method s'occupe de la soumission du formulaire.
Un autre exemple de modificateur très utile est le arrêt modificateur d'événement. Le arrêt Le modificateur d'événement empêche un événement de se propager plus haut dans l'arborescence DOM.
Habituellement, l'événement d'un élément enfant HTML remonte dans l'arborescence DOM, activant tous les écouteurs d'événement attachés aux éléments parents. Vous pouvez empêcher cela propagation d'événement avec le arrêt modificateur et empêcher l'événement de déclencher d'autres écouteurs d'événement.
Pour comprendre comment le arrêt modificateur arrête la propagation des événements plus haut dans un arbre DOM, considérez le bloc de code ci-dessous :
<corps>
<dividentifiant="application">
<div @Cliquez sur="clic extérieur"classe="extérieur">
<div @click.stop="clic intérieur"classe="intérieur">
<bouton @Cliquez sur="boutonClic"classe="bouton">Cliquez sur moibouton>
div>
div>
div>
<scénario>
const app = Vue.createApp({
méthodes: {
clicextérieur() {
console.log('Clic externe')
},
clicintérieur() {
console.log('Clic interne')
},
boutonClic() {
console.log('Clic sur le bouton')
}
}
});
app.mount("#app");
scénario>
corps>
Le bloc de code ci-dessus a trois écouteurs d'événement attachés à trois éléments différents. Le bouton l'élément est à l'intérieur de la div avec le intérieur classe, tandis que la div avec la intérieur la classe est à l'intérieur de la div avec le extérieur classe.
Chacun des trois éléments écoute un Cliquez sur événement et se connecte à la console, le nom de l'élément HTML sur lequel vous avez cliqué. Vous trouverez ci-dessous un style CSS de classe supplémentaire pour faciliter la compréhension du bloc de code ci-dessus :
<diriger>
<style>
.extérieur {
rembourrage: 20px ;
couleur de fond: noir ;
}
.intérieur {
rembourrage: 20px ;
couleur de fond: gris ;
}
bouton {
rembourrage: 10px ;
couleur de fond: blanc ;
bordure: 2px noir solide ;
taille de police: 16 px ;
font-weight: gras ;
curseur: pointeur ;
}
style>
diriger>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 le boutonCliquez méthode et consigne un message dans la console. Le programme appelle également le Clicintérieur méthode.
Cependant, le programme n'appelle pas le Clicextérieur méthode parce que le bloc de code a ajouté une arrêt modificateur à la Clicintérieur écouteur d'événement. Cela empêche l'événement de se propager plus haut dans l'arborescence DOM.
Sans le arrêt modificateur, le programme appellera le boutonCliquez lorsque vous cliquez sur le bouton, et l'événement continuera à se propager dans l'arborescence, atteignant la Clicintérieur méthode, puis la Clicextérieur méthode.
Gestion des événements dans les applications Web
Vous avez appris à utiliser la liaison d'événements dans Vue pour attacher des écouteurs d'événements à des éléments et comment appeler des méthodes lorsque des événements se produisent. Vous avez également compris comment utiliser les modificateurs d'événement 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 intégré à de nombreuses méthodes pour capturer et gérer une variété de ces événements. Ces événements aident à créer des applications interactives.
