Vue.js är ett mycket kraftfullt, lättläst och lättillgängligt bibliotek som med kunskapen om HTML, CSS och Javascript kan börja bygga webbapplikationer i det. Vue.js är byggt genom att kombinera de bästa funktionerna från redan befintliga Angular och react Frameworks. Det är ett progressivt och reaktivt Javascript-ramverk som används för att bygga användargränssnitt (användargränssnitt) och SPA (enkelsidiga applikationer), varför utvecklarna älskar att koda och känna frihet och komfort när de utvecklar applikationer i Vue.js.Om vi ta en titt på Event Listening and Hantering i Vue.js., vi vet att det ger ett v-on-direktiv för att lyssna och hantera händelser. Vi kan använda v-on-direktivet för att lyssna på DOM och utföra nödvändiga uppgifter. Det ger också många evenemangshanterare. Men i den här artikeln kommer vi bara att lära oss och behålla vårt fokus på klickhändelserna. Så, låt oss komma igång!
Precis som Javascripts onClick-händelse erbjuder Vue.js v-on: click för att lyssna på händelser.
Syntaxen för v-on: click-händelse skulle vara så här:
< knapp v-on: klicka='functionName'>Klick</ knapp >
Vue.js ger en stenografi @ istället för att använda v-on också.
< knapp @klick='functionName'> Klicka</ knapp >
Vue.js slutar inte med att bara lyssna på klickhändelsen och anropa funktionen. Det kommer också att tillåta oss att direkt skriva alla räkneåtgärder eller allt som rör Javascript inom citattecken. Precis som det här:
< knapp @klick='num += 1'> Lägg till</ knapp >
Vue.js ger oss möjlighet att anropa metoden eller funktionen i ett inbyggt Javascript -uttalande, som visas nedan:
< knapp @klick='meddelande (' Hej ')'> Visa</ knapp >Med Vue.js händelsehanterare kan vi också komma åt DOM -händelsen, med hjälp av inline -sats, genom att föra Vue.js speciellt tillhandahållna $ händelsevariabel till metodens argument, precis som exemplet nedan:
< knapp @klick='meddelande (' Hej ', $ event)'> Skicka</ knapp >
Vue.js ger oss också möjlighet att anropa flera funktioner eller metoder. Vi kan anropa mer än en funktion och separera dem med kommatecken, som i det här exemplet:
< knapp @klick='första (' Hej '), andra (' Hej ', $ händelse)'> Skicka</ knapp >Vue.js tillhandahåller också händelsemodifierare.
Händelsemodifierare
Vi behöver ofta ringa modifierare tillsammans med händelserna. Så, Vue.js ger några av följande modifierare:
.sluta
Det kommer att stoppa klickhändelsens överföring.
< till @click.stop='gör det här'></ till >.förhindra
Det förhindrar att sidan laddas om eller omdirigeras.
< form @skicka. förebygga='på skicka'></ form >.en gång
Det kommer att utlösa klickhändelsen bara en gång.
< till @klicka. en gång='gör det här'></ till >.fånga
Det används mest för att lägga till eventlyssnaren.
< div @click.capture='gör det här'> ...</ div >Vi kan också kedja modifierarna. Kom dock ihåg att ordningen på modifierare spelar roll, och det kommer att påverka resultaten.
< till @click.stop.prevent='gör det'></ till >Slutsats
I denna artikel har vi täckt hela Click -händelsehanteringskoncept från noob till ninja nivå. Vi har lärt oss om de olika syntaxerna för att skriva klickhändelser och de olika sätten att använda | _+_ | direktiv från Vue.js för att underlätta för utvecklare och olika händelsemodifierare. För mer användbart innehåll som detta, relaterat till Vue.js, fortsätt att besöka linuxhint.com.