La gestione degli eventi è una parte importante dell'interazione con gli utenti e della modifica dello stato di un'applicazione in Vue.js. Vue.js offre vari modi per gestire gli eventi, inclusi gestori di eventi in linea, metodi e modificatori di eventi.
Ecco alcuni eventi comuni in Vue.js
1. click evento
Questo evento viene attivato quando si fa clic su un elemento selezionabile, ad esempio un pulsante o un collegamento. Viene comunemente utilizzato per eseguire azioni o attivare funzioni quando un utente interagisce con l'elemento.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input evento
Questo evento viene attivato quando il valore di un input elemento cambia. Viene comunemente utilizzato con la v-model direttiva per associare il input valore a una proprietà dei dati nel componente di Vue. Ciò consente di aggiornare in modo reattivo e tenere traccia delle modifiche al input valore.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change evento
Questo evento viene attivato quando il valore di un elemento del modulo, ad esempio un menu a discesa o una casella di controllo, viene modificato. Viene comunemente utilizzato per eseguire azioni o aggiornare i dati in base all'opzione selezionata o allo stato selezionato dell'elemento.
<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 evento
Questo evento viene attivato quando viene inviato un modulo, facendo clic su un submit pulsante o premendo Invio all'interno di un input campo. Viene comunemente utilizzato per gestire l'invio di moduli, convalidare l'utente input ed eseguire azioni come effettuare richieste API o salvare dati.
<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 evento
Questo evento viene attivato quando un tasto viene rilasciato dopo essere stato premuto. Viene comunemente utilizzato per eseguire azioni in risposta alla tastiera input, come filtrare un elenco di elementi o attivare una funzionalità di ricerca.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown evento
Questo evento viene attivato quando viene premuto un tasto. È comunemente usato per ascoltare combinazioni di tasti specifiche o eseguire azioni mentre si tiene premuto un tasto, come navigare attraverso una presentazione o controllare un gioco.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover evento
Questo evento viene attivato quando il puntatore del mouse viene spostato su un elemento. È comunemente usato per mostrare informazioni aggiuntive o fornire un feedback visivo quando si passa con il mouse sopra un elemento.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout evento
Questo evento viene attivato quando il puntatore del mouse viene spostato fuori da un elemento. È comunemente usato per nascondere o modificare elementi quando il mouse non passa più su di essi.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll evento
Questo evento viene attivato quando un elemento viene fatto scorrere. Viene comunemente utilizzato per implementare funzionalità come lo scorrimento infinito, il caricamento lento dei contenuti o l'aggiornamento degli elementi dell'interfaccia utente in base alla scroll posizione.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus evento
Questo evento viene attivato quando un elemento riceve focus, in genere quando viene fatto clic su di esso o quando l'utente lo raggiunge utilizzando la tastiera. È comunemente usato per eseguire azioni o fornire un feedback visivo quando un input elemento o guadagna focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Questi sono solo alcuni esempi di base di eventi in Vue.js. È possibile personalizzare le funzioni di gestione degli eventi per soddisfare le esigenze specifiche del progetto.