Phenquestions
Vue.js är ett mycket kraftfullt, lättlärt och tillgängligt bibliotek som med kunskap om HTML, CSS och Javascript kan vi börja bygga webbapplikationer i det. Vue.js är byggd genom att kombinera de bästa funktionerna från redan existerande ramar för Angular och react. 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 medan de utvecklar applikationer i Vue.js.Om vi tar en titt på Event Listening and Handling in 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 de uppgifter som krävs. Det ger också många evenemangshanterare. I den här artikeln kommer vi dock bara att lära oss och hålla fokus på klickhändelserna. Så, låt oss komma igång!
Precis som Javaskripts onClick-händelse, Vue.js tillhandahåller v-on: klicka för lyssningshändelser.
Syntaxen för v-on: click-händelsen skulle vara så här:
Vue.js ger en kortfattad “@” istället för att använda “v-on” också.
Vue.js slutar inte bara med att lyssna på klickhändelsen och ringa till funktionen. Det gör det också möjligt för oss att direkt skriva aritmetiska operationer eller något som är relaterat till Javascript inuti citattecken "". Precis som det här:
Vue.js ger oss möjlighet att anropa metoden eller funktionen i ett inbyggt Javascript-uttalande, som visas nedan:
Använda Vue.js händelsehanterare, vi kan också komma åt DOM-händelsen med hjälp av inline-uttalande genom att skicka Vue.js tillhandahåller särskilt variabeln "$ event" i metodens argument, precis som exemplet nedan:
Vue.js ger oss också möjlighet att ringa flera funktioner eller metoder. Vi kan anropa mer än en funktion och separera dem med kommatecken, som det här exemplet:
Vue.js tillhandahåller också händelsemodifierare.
Event Modifiers
Vi behöver ofta ringa modifierare tillsammans med händelserna. Så Vue.js tillhandahåller några av följande modifierare:
.sluta
Det stoppar överföringen av klickhändelsen.
.förhindra
Det förhindrar att sidan laddas om eller omdirigeras.
.en gång
Det aktiverar klickhändelsen bara en gång.
.fånga
Det används mest för att lägga till evenemangets lyssnare.
Vi kan också kedja modifierarna. Men kom ihåg att ordningen på modifierare spelar roll, och det kommer att påverka resultatet.
Slutsats
I den här artikeln har vi täckt hela Click-händelseshanteringskoncepten 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 v-on: klicka 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 med att besöka linuxhint.com.
