Vue.js és una biblioteca molt potent, fàcil d’aprendre i accessible que, amb el coneixement d’HTML, CSS i Javascript, podem començar a crear-hi aplicacions web. Vue.js es crea combinant les millors funcions dels marcs Angular i react ja existents. Es tracta d’un marc Javascript progressiu i reactiu que s’utilitza per crear interfícies d’usuari (interfícies d’usuari) i SPAs (aplicacions d’una sola pàgina), motiu pel qual als desenvolupadors els encanta codificar i sentir llibertat i comoditat mentre desenvolupen aplicacions a Vue.js. fes una ullada a l’escolta i el tractament d’esdeveniments a Vue.js., sabrem que proporciona una directiva de v-on per escoltar i gestionar esdeveniments. Podem utilitzar la directiva v-on per escoltar el DOM i realitzar les tasques necessàries. També proporciona molts gestors d'esdeveniments. Tot i això, en aquest article només aprendrem i ens concentrarem en els esdeveniments de clic. Comencem, doncs,
Igual que l'esdeveniment onClick de Javascript, Vue.js proporciona v-on: clic per escoltar esdeveniments.
La sintaxi per a l'esdeveniment de clic: seria així:
< botó v-on: feu clic='functionName'>Feu clic a</ botó >
Vue.js proporciona una abreviatura @ en lloc d’utilitzar també v-on.
< botó @ clica='functionName'> Feu clic a</ botó >
Vue.js no s'atura només escoltant l'esdeveniment de clic i trucant a la funció. També ens permetrà escriure directament qualsevol operació aritmètica o qualsevol cosa relacionada amb Javascript dins de les cometes. Així:
< botó @ clica='num + = 1'> Afegeix</ botó >
Vue.js ens proporciona trucar al mètode o a la funció en una declaració Javascript en línia, com es mostra a continuació:
< botó @ clica='message (' Hola ')'> Mostra</ botó >Mitjançant els controladors d’esdeveniments de Vue.js, també podem accedir a l’esdeveniment DOM, mitjançant instruccions inline, passant la variable d’esdeveniment $ proporcionada especialment per Vue.js a l’argument del mètode, tal com passa a l’exemple següent:
< botó @ clica='message (' Hola ', $ event)'> Envia</ botó >
Vue.js també ens proporciona trucades a múltiples funcions o mètodes. Podem anomenar més d'una funció i separar-les per comes, com ara aquest exemple:
< botó @ clica='primer (' Hola '), segon (' Hola ', $ esdeveniment)'> Envia</ botó >Vue.js també proporciona modificadors d'esdeveniments.
Modificadors d'esdeveniments
Sovint hem de trucar als modificadors juntament amb els esdeveniments. Per tant, Vue.js proporciona alguns dels següents modificadors:
.Atura
Aturarà la transmissió de l'esdeveniment de clic.
< a @ click.stop='fer això'></ a >.prevenir
Evitarà que la pàgina es torni a carregar o redirigir.
< forma @ submit.prevent='onSubmit'></ forma >.un cop
Només activarà l'esdeveniment de clic.
< a @ feu clic una vegada='fer això'></ a >.captura
S’utilitza sobretot per afegir l’oient d’esdeveniments.
< div @ clic.captura='fer això'> ...</ div >També podem encadenar els modificadors. Tot i això, tingueu en compte que l’ordre dels modificadors és important i afectarà els resultats.
< a @ click.stop.prevent='fer això'></ a >Conclusió
En aquest article, hem tractat tot el concepte de manipulació d'esdeveniments Click des del nivell noob fins al ninja. Hem après sobre les diferents sintaxis d’escriure esdeveniments de clics i les diferents maneres d’utilitzar v-on:click directiva proporcionada per Vue.js per facilitar els desenvolupadors i els diferents modificadors d'esdeveniments. Per obtenir contingut més útil com aquest, relacionat amb Vue.js, continueu visitant linuxhint.com.