Scopri come migliorare la gestione degli eventi con la direttiva v-on di Vue.
L'ascolto degli eventi degli utenti è parte integrante di qualsiasi app Web reattiva e le app Vue non fanno eccezione. Vue viene fornito con un modo semplice ed efficiente per gestire gli eventi con la sua direttiva v-on.
Che cos'è l'evento vincolante in Vue?
L'associazione di eventi è una funzionalità di Vue.js che consente di collegare un listener di eventi a un file Document Object Model (DOM) elemento. Quando si verifica un evento, il listener di eventi attiva un'azione o una risposta nella tua app Vue.
Puoi ottenere l'associazione di eventi in Vue con il v-on direttiva. Questa direttiva consente alla tua app di ascoltare eventi utente come clic, invio o eventi key-up.
Per associare un listener di eventi a un elemento utilizzando v-on, aggiungi il nome dell'evento come parametro alla direttiva:
<html>
<Testa>
<copionesrc=" https://unpkg.com/vue@3/dist/vue.global.js">copione>
Testa>
<corpo>
<divid="app">
<pulsantev-on: clic="contatore++">Cliccamipulsante>
<P>{{ contatore}}P>
div>
<copione>
cost app = Vue.createApp({
dati() {
ritorno {
testo: 'Vue è fantastico!',
contatore: 0
}
}
})
app.mount('#app')
copione>
corpo>
html>
Il blocco di codice sopra mostra un esempio di un'app Vue che ascolta a clic evento. Il blocco di codice usa a pulsante per incrementare il contatore valore nella proprietà data dell'istanza Vue di uno.
Il blocco di codice sopra associa l'espressione JavaScript contatore++ al pulsante clic evento con il v-on direttiva. Vue usa il @ carattere come scorciatoia al posto del v-on direttiva dovuta a v-onuso frequente di:
<pulsante @clic="contatore++">Cliccamipulsante>
L'associazione di eventi in Vue non è limitata agli eventi di clic. Vue gestisce altri eventi, come eventi di pressione di tasti, eventi di passaggio del mouse e altro.
Per associare uno qualsiasi di questi eventi al file v-on direttiva, sostituire il clic evento con il nome dell'evento desiderato:
<pulsante @keydown.enter="contatore++">Cliccamipulsante>
Il codice sopra imposta un listener di eventi su pulsante che ascolta il keydown evento. Quando viene premuto un tasto qualsiasi mentre il pulsante è attivo, Vue valuta il file contatore++ espressione.
Nella maggior parte delle app Vue, puoi gestire una logica più complessa basata su eventi specifici che si verificano. Eventi e metodi lavorano di pari passo per eseguire azioni dell'app basate su un evento.
La proprietà metodi in Oggetto Opzioni di Vue detiene importanti funzioni di cui la tua app Vue ha bisogno per una maggiore reattività. Con la proprietà metodi in Vue, puoi gestire una logica complessa basata su eventi.
Ecco un esempio di un'app Vue che mostra gli eventi gestiti dalla proprietà methods:
<html>
<Testa>
<copionesrc=" https://unpkg.com/vue@3/dist/vue.global.js">copione>
Testa>
<corpo>
<divid="app">
<pulsante @clic="incremento">Aggiungi 1pulsante>
<pulsante @clic="ridurre">ridurre 1pulsante>
<P>{{ contatore }}P>
div>
<copione>
const app = Vue.createApp({
dati() {
ritorno {
testo: 'Vue è fantastico!',
contatore: 0
}
},
metodi: {
incremento(){
this.counter = this.counter + 1
},
ridurre() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
copione>
corpo>
html>
L'app Vue sopra mostra come collegare gli eventi con i metodi. L'app dispone di due pulsanti su cui gli utenti possono fare clic per aumentare o ridurre il valore del contatore nella proprietà dei dati.
L'app raggiunge questo obiettivo con il @clic direttiva. IL @clic direttiva punta alle funzioni nella proprietà metodi per manipolare il valore del contatore.
Quando si collega un argomento all'evento click, è possibile personalizzare i metodi di incremento e riduzione per aggiungere o ridurre il valore del contatore in base all'argomento passato al metodo.
Così:
<corpo>
<divid="app">
<pulsante @clic="incremento (5)">Aggiungi 5pulsante><pulsante @clic="ridurre (3)">ridurre 3pulsante>
<P>{{ contatore }}P>
div><copione>
const app = Vue.createApp({
dati() {
ritorno {
testo: 'Vue è fantastico!',
contatore: 0
}
},
metodi: {
incremento (num){
this.counter = this.counter + num
},
ridurre (num) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
copione>
corpo>
Questo blocco di codice si estende sulla precedente app Vue per consentire il passaggio di argomenti ai metodi legati al click event listener sul pulsante.
I metodi incrementa e reduce nell'istanza Vue accettano un argomento num per aumentare o ridurre la proprietà counter.
Questo esempio mostra come puoi lavorare con gli argomenti quando colleghi metodi con eventi in Vue. Il collegamento dei metodi con gli eventi può aiutare a rendere le app Vue più interattive.
Esplorare i modificatori di prevenzione e arresto in Vue
I modificatori di eventi in Vue ti consentono di creare listener di eventi migliori che soddisfano le esigenze specifiche della tua applicazione. Per utilizzare questi modificatori di eventi, connetti i modificatori agli eventi in Vue.
Per esempio:
<modulo @presentare.prevenire="handleSubmit">
<ingressotipo="testo"modello v="testo">
<pulsantetipo="invia">Inviapulsante>
modulo>
Il blocco di codice sopra concatena il file impedire modificatore per l'evento di invio. IL impedire modificatore è comunemente usato quando si lavora con i moduli in Vue.
IL impedire lo scopo del modificatore è impedire il comportamento predefinito dell'invio del modulo, ovvero ricaricare la pagina. Usando impedire, Vue può continuare i suoi processi mentre il handleSubmit Il metodo si occupa dell'invio del modulo.
Un altro esempio di modificatore molto utile è il fermare modificatore di eventi. IL fermare il modificatore di evento impedisce a un evento di propagarsi più in alto nell'albero DOM.
Di solito, l'evento di un elemento figlio HTML si propaga attraverso l'albero DOM, attivando qualsiasi listener di eventi collegato agli elementi padre. Puoi impedirlo propagazione degli eventi con il fermare modificatore e impedisce all'evento di attivare altri listener di eventi.
Per capire come il fermare modificatore interrompe la propagazione di eventi più in alto in un albero DOM, considera il blocco di codice seguente:
<corpo>
<divid="app">
<div @clic="clic esterno"classe="esterno">
<div @click.stop="clic interno"classe="interno">
<pulsante @clic="pulsanteClic"classe="pulsante">Cliccamipulsante>
div>
div>
div>
<copione>
const app = Vue.createApp({
metodi: {
clic esterno() {
console.log('Clic esterno')
},
clic interno() {
console.log('Clic interno')
},
pulsanteclic() {
console.log('Clic sul pulsante')
}
}
});
app.mount("#app");
copione>
corpo>
Il blocco di codice sopra ha tre listener di eventi collegati a tre diversi elementi. IL pulsante elemento è all'interno del div con il interno class, mentre il div con il interno class è all'interno del div con il esterno classe.
Ciascuno dei tre elementi ascolta a clic evento e registra nella console, il nome dell'elemento HTML selezionato. Di seguito è riportato uno stile CSS di classe aggiuntivo per rendere più facile la comprensione del blocco di codice precedente:
<Testa>
<stile>
.esterno {
imbottitura: 20px;
colore di sfondo: nero;
}
.interno {
imbottitura: 20px;
colore di sfondo: grigio;
}
pulsante {
imbottitura: 10px;
colore di sfondo: bianco;
bordo: 2px nero pieno;
dimensione carattere: 16px;
font-weight: grassetto;
cursore: puntatore;
}
stile>
Testa>Durante l'esecuzione del programma, l'app Vue creata sarà simile a questa:
Si noti che quando si fa clic sul pulsante, il programma chiama il file pulsanteClic metodo e registra un messaggio nella console. Il programma chiama anche il file clic interno metodo.
Tuttavia, il programma non chiama il file clic esterno metodo perché il blocco di codice ha aggiunto a fermare modificatore di clic interno ascoltatore di eventi. Ciò impedisce all'evento di propagarsi più in alto nell'albero DOM.
Senza il fermare modificatore, il programma chiamerà il pulsanteClic metodo quando fai clic sul pulsante e l'evento continuerà a propagarsi lungo l'albero, raggiungendo il clic interno metodo e poi il clic esterno metodo.
Gestione degli eventi nelle app Web
Hai imparato come utilizzare l'associazione di eventi in Vue per collegare i listener di eventi agli elementi e come chiamare i metodi quando si verificano eventi. Hai anche capito come utilizzare i modificatori di eventi per personalizzare il comportamento degli eventi.
Le app Web si basano su una qualche forma di eventi utente per eseguire le funzioni. JavaScript è integrato con molti metodi per catturare e gestire una varietà di questi eventi. Questi eventi aiutano nella creazione di app interattive.
