Vue.js è una libreria molto potente, facile da imparare e accessibile che con la conoscenza di HTML, CSS e Javascript, possiamo iniziare a creare applicazioni web al suo interno. Vue.js è costruito combinando le migliori funzionalità di Angular e React Framework già esistenti. È un framework Javascript progressivo e reattivo che viene utilizzato per creare UI (interfacce utente) e SPA (applicazioni a pagina singola), motivo per cui gli sviluppatori amano programmare e sentirsi liberi e a proprio agio mentre sviluppano applicazioni in Vue.js. dai un'occhiata a Ascolto e gestione degli eventi in Vue.js., sapremo che fornisce una direttiva v-on per ascoltare e gestire gli eventi. Possiamo usare la direttiva v-on per ascoltare il DOM ed eseguire le attività richieste. Fornisce anche molti gestori di eventi. Tuttavia, in questo articolo, impareremo e ci concentreremo solo sugli eventi di clic. Quindi iniziamo!
Proprio come l'evento onClick di Javascript, Vue.js fornisce v-on:click per gli eventi di ascolto.
La sintassi per l'evento v-on:click sarebbe simile a questa:
< pulsante v-on: clic='nomefunzione'>Clic</ pulsante >
Vue.js fornisce una scorciatoia @ invece di usare anche v-on.
< pulsante @clic='nomefunzione'>Clic</ pulsante >
Vue.js non si limita ad ascoltare l'evento click e a chiamare la funzione. Ci permetterà anche di scrivere direttamente all'interno delle virgolette qualsiasi operazione aritmetica o qualsiasi cosa relativa a Javascript. Proprio come questo:
< pulsante @clic='num += 1'>Aggiungi</ pulsante >
Vue.js ci consente di chiamare il metodo o la funzione in un'istruzione Javascript in linea, come mostrato di seguito:
< pulsante @clic='messaggio('Ciao')'>Mostra</ pulsante >Usando i gestori di eventi di Vue.js, possiamo accedere anche all'evento DOM, usando l'istruzione in linea, passando la variabile $event appositamente fornita da Vue.js nell'argomento del metodo, proprio come nell'esempio seguente:
< pulsante @clic='message('Ciao', $evento)'>Invia</ pulsante >
Vue.js ci consente anche di chiamare più funzioni o metodi. Possiamo chiamare più di una funzione e separarle con virgole, come in questo esempio:
< pulsante @clic='first('Ciao'), second('Ciao', $evento) '>Invia</ pulsante >Vue.js fornisce anche modificatori di eventi.
Modificatori di eventi
Spesso abbiamo bisogno di chiamare i modificatori insieme agli eventi. Quindi, Vue.js fornisce alcuni dei seguenti modificatori:
.fermare
Interromperà la trasmissione dell'evento click.
< a @click.stop='Fai questo'></ a >.prevenire
Impedisce alla pagina di ricaricare o reindirizzare.
< modulo @submit.prevent='in invio'></ modulo >.una volta
Innescherà l'evento click solo una volta.
< a @click.once='Fai questo'></ a >.catturare
Viene utilizzato principalmente per aggiungere il listener di eventi.
< div @click.cattura='Fai questo'> ...</ div >Possiamo anche concatenare i modificatori. Tuttavia, tieni presente che l'ordine dei modificatori è importante e influenzerà i risultati.
< a @click.stop.prevent='Fai quello'></ a >Conclusione
In questo articolo, abbiamo trattato l'intero concetto di gestione dell'evento Click dal livello noob al livello ninja. Abbiamo appreso le diverse sintassi di scrittura degli eventi click e i diversi modi di utilizzare |_+_| direttiva fornita da Vue.js per la facilità degli sviluppatori e diversi modificatori di eventi. Per contenuti più utili come questo, relativi a Vue.js, continua a visitare linuxhint.com.