La gestion des événements est une partie importante de l'interaction avec les utilisateurs et de la modification de l'état d'une application dans Vue.js. Vue.js propose différentes manières de gérer les événements, notamment les gestionnaires d'événements en ligne, les méthodes et les modificateurs d'événements.
Voici quelques événements courants dans Vue.js
1. click événement
Cet événement est déclenché lorsqu'un élément cliquable, tel qu'un bouton ou un lien, est cliqué. Il est couramment utilisé pour effectuer des actions ou déclencher des fonctions lorsqu'un utilisateur interagit avec l'élément.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input événement
Cet événement est déclenché lorsque la valeur d'un input élément change. Il est couramment utilisé avec la v-model directive pour lier la input valeur à une propriété de données dans le composant de Vue. Cela vous permet de mettre à jour et de suivre de manière réactive les modifications apportées à la input valeur.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change événement
Cet événement est déclenché lorsque la valeur d'un élément de formulaire, tel qu'une liste déroulante de sélection ou une case à cocher, est modifiée. Il est couramment utilisé pour effectuer des actions ou mettre à jour des données en fonction de l'option sélectionnée ou de l'état coché de l'élément.
<select v-model="selectedOption" v-on:change="handleSelectChange">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>data() {
return {
selectedOption: ''
};
},
methods: {
handleSelectChange() {
console.log('Selected option:', this.selectedOption);
}
}
4. submit événement
Cet événement est déclenché lorsqu'un formulaire est soumis, soit en cliquant sur un submit bouton, soit en appuyant sur Entrée dans un input champ. Il est couramment utilisé pour gérer les soumissions de formulaires, valider l'utilisateur input et effectuer des actions telles que faire des demandes d'API ou enregistrer des données.
<form v-on:submit="handleSubmit">
<input type="text" v-model="name" />
<button type="submit">Submit</button>
</form>data() {
return {
name: ''
};
},
methods: {
handleSubmit(event) {
event.preventDefault();
console.log('Form submitted! Name:', this.name);
}
}
5. keyup événement
Cet événement est déclenché lorsqu'une touche est relâchée après avoir été enfoncée. Il est couramment utilisé pour effectuer des actions en réponse au clavier input, comme filtrer une liste d'éléments ou déclencher une fonctionnalité de recherche.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown événement
Cet événement est déclenché lorsqu'une touche est enfoncée. Il est couramment utilisé pour écouter des combinaisons de touches spécifiques ou effectuer des actions lorsqu'une touche est enfoncée, comme naviguer dans un diaporama ou contrôler un jeu.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover événement
Cet événement est déclenché lorsque le pointeur de la souris est déplacé sur un élément. Il est couramment utilisé pour afficher des informations supplémentaires ou fournir un retour visuel lors du survol d'un élément.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout événement
Cet événement est déclenché lorsque le pointeur de la souris est déplacé hors d'un élément. Il est couramment utilisé pour masquer ou modifier des éléments lorsque la souris ne les survole plus.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll événement
Cet événement est déclenché lors du défilement d'un élément. Il est couramment utilisé pour implémenter des fonctionnalités telles que le défilement infini, le chargement différé de contenu ou la mise à jour des éléments de l'interface utilisateur en fonction de la scroll position.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus événement
Cet événement est déclenché lorsqu'un élément reçoit focus, généralement lorsqu'il est cliqué ou lorsque l'utilisateur y accède à l'aide du clavier. Il est couramment utilisé pour effectuer des actions ou fournir un retour visuel lorsqu'un input élément ou gagne focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Ce ne sont là que quelques exemples de base d'événements dans Vue.js. Vous pouvez personnaliser les fonctions de gestion des événements pour répondre aux besoins spécifiques de votre projet.