L’écoute des événements utilisateur fait partie intégrante de toute application web responsive, et les applications Vue ne font pas exception à la règle. Vue dispose d’un moyen simple et efficace de gérer les événements grâce à sa directive v-on.
Qu’est-ce que l’Event Binding 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 réaliser une liaison événementielle dans Vue avec la fonction v-on directive. Cette directive permet à votre application d’écouter les événements de l’utilisateur tels que le clic, l’entrée ou le lever de touche.
Pour attacher un écouteur d’événements à un élément en utilisant la directive v-on, ajouter le nom de l’événement en tant que paramètre de la directive :
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter++">Click me</button>
<p>{{ counter}}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
}
})
app.mount('#app')
</script>
</body>
</html>
Le bloc de code ci-dessus montre un exemple d’application Vue qui écoute un événement clic événement. Le bloc de code utilise un bouton pour incrémenter le compteur dans la propriété data de l’instance Vue.
Le bloc de code ci-dessus lie l’expression JavaScript compteur++ pour le bouton clic avec l’événement v-on directive. Vue utilise la directive @ comme raccourci à la place du caractère v-on directive due à v-onest un usage fréquent :
<button @click="counter++">Click me</button>
La liaison événementielle dans Vue ne se limite pas aux événements de clic. Vue gère d’autres événements, comme les événements d’appui sur une touche, les événements de survol de la souris, etc.
Pour lier l’un de ces événements à l’élément v-on remplacer la directive cliquer avec le nom de l’événement souhaité :
<button @keydown.enter="counter++">Click me</button>
Le code ci-dessus met en place un récepteur d’événements sur la page bouton qui écoute les keydown événement. 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 les événements.
Voici un exemple d’application Vue qui montre les événements gérés par la propriété methods :
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="increment">Add 1</button>
<button @click="reduce">reduce 1</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(){
this.counter = this.counter + 1
},
reduce() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
</script>
</body>
</html>
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 méthode @click . La directive @click pointe vers les fonctions de la propriété methods pour manipuler la valeur du compteur.
Lorsque vous liez 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 :
<body>
<div id="app">
<button @click="increment(5)">Add 5</button>
<button @click="reduce(3)">reduce 3</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(num){
this.counter = this.counter + num
},
reduce(num) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
</script>
</body>
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 de clic 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é du compteur.
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 permet de 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 les enchaînez à des événements dans Vue.
Par exemple :
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
Le bloc de code ci-dessus enchaîne les empêcher à l’événement de soumission. Le modificateur empêcher est couramment utilisé lorsque l’on travaille avec des formulaires dans Vue.
Le modificateur prévenir 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êcherVue peut continuer ses processus pendant que le handleSubmit La méthode handleSubmit s’occupe de la soumission du formulaire.
Un autre exemple de modificateur très utile est la méthode stop modificateur d’événement. Le modificateur d’événement arrêt Le modificateur d’événement arrête la propagation d’un événement 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êche l’événement de déclencher d’autres récepteurs d’événements.
Pour comprendre comment le modificateur arrêt arrête la propagation d’événements plus haut dans l’arbre DOM, comme le montre le bloc de code ci-dessous :
<body>
<div id="app">
<div @click="outerClick" class="outer">
<div @click.stop="innerClick" class="inner">
<button @click="buttonClick" class="button">Click me</button>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
methods: {
outerClick() {
console.log('Outer click')
},
innerClick() {
console.log('Inner click')
},
buttonClick() {
console.log('Button click')
}
}
});
app.mount("#app");
</script>
</body>
Le bloc de code ci-dessus possède trois récepteurs d’événements attachés à trois éléments différents. Le bloc de code ci-dessus a trois écouteurs d’événements attachés à trois éléments différents. bouton se trouve à l’intérieur de la div avec l’élément interne tandis que la div avec la classe intérieur se trouve à l’intérieur de la div avec l’élément extérieur classe.
Chacun des trois éléments est à l’écoute d’un 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 :
<head>
<style>
.outer {
padding: 20px;
background-color: black;
}
.inner {
padding: 20px;
background-color: gray;
}
button {
padding: 10px;
background-color: white;
border: 2px solid black;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
En exécutant le 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 méthode.
Cependant, le programme n’appelle pas la méthode outerClick parce que le bloc de code a ajouté un arrêt modificateur de la innerClick de l’écouteur d’événement. Cela empêche l’événement de se propager plus haut dans l’arbre DOM.
Sans l’option stop le programme appellera le modificateur buttonClick lorsque vous cliquez sur le bouton, et l’événement continuera à se propager dans l’arbre, atteignant la méthode innerClick puis la méthode outerClick méthode.
La 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.