Vue.js is een zeer krachtige, gemakkelijk te leren en toegankelijke bibliotheek waarmee we met de kennis van HTML, CSS en Javascript kunnen beginnen met het bouwen van webapplicaties. Vue.js is gebouwd door de beste functies van reeds bestaande Angular en react Frameworks te combineren. Het is een progressief en reactief Javascript-framework dat wordt gebruikt om UI's (User Interfaces) en SPA's (Single-page Applications) te bouwen. Daarom houden de ontwikkelaars ervan om te coderen en vrijheid en comfort te voelen tijdens het ontwikkelen van applicaties in Vue.js.Als we kijk eens naar het luisteren en afhandelen van gebeurtenissen in Vue.js. We zullen weten dat het een v-on-richtlijn biedt om naar gebeurtenissen te luisteren en deze af te handelen. We kunnen de v-on-richtlijn gebruiken om naar de DOM te luisteren en de vereiste taken uit te voeren. Het biedt ook veel event handlers. In dit artikel zullen we echter alleen leren en onze focus houden op de klikgebeurtenissen. Dus laten we beginnen!
Net als de onClick-gebeurtenis van Javascript, biedt Vue.js v-on:click voor luistergebeurtenissen.
De syntaxis voor v-on:click-gebeurtenis zou als volgt zijn:
< knop v-on:klik='functieNaam'>Klik</ knop >
Vue.js biedt een afkorting @ in plaats van ook v-on te gebruiken.
< knop @Klik='functieNaam'>Klik</ knop >
Vue.js stopt niet bij het luisteren naar de klikgebeurtenis en het aanroepen van de functie. Het stelt ons ook in staat om elke rekenkundige bewerking of iets dat met Javascript te maken heeft direct tussen de aanhalingstekens te schrijven. Net als dit:
< knop @Klik='getal += 1'>Toevoegen</ knop >
Vue.js biedt ons de mogelijkheid om de methode of functie aan te roepen in een inline Javascript-instructie, zoals hieronder weergegeven:
< knop @Klik='bericht('Hallo')'>Toon</ knop >Met behulp van de gebeurtenishandlers van Vue.js kunnen we ook toegang krijgen tot de DOM-gebeurtenis, met behulp van een inline-statement, door de speciaal verstrekte $ event-variabele van Vue.js door te geven aan het argument van de methode, net zoals in het onderstaande voorbeeld:
< knop @Klik='message('Hallo', $event)'>Verzenden</ knop >
Vue.js biedt ons ook de mogelijkheid om meerdere functies of methoden aan te roepen. We kunnen meer dan één functie aanroepen en ze scheiden door komma's, zoals in dit voorbeeld:
< knop @Klik='first('Hallo'), second('Hallo', $event) '>Verzenden</ knop >Vue.js biedt ook gebeurtenismodifiers.
Gebeurtenismodificatoren
We moeten vaak modifiers samen met de gebeurtenissen aanroepen. Vue.js biedt dus enkele van de volgende modificaties:
.stop
Het stopt de verzending van de klikgebeurtenis.
< tot @klik.stop='doe dit'></ tot >.voorkomen
Het voorkomt dat de pagina opnieuw wordt geladen of omgeleid.
< formulier @submit.prevent='opVerzenden'></ formulier >.een keer
Het zal de klikgebeurtenis slechts één keer activeren.
< tot @klik.eenmaal='doe dit'></ tot >.vastlegging
Het wordt meestal gebruikt om de gebeurtenislistener toe te voegen.
< div @klik.capture='doe dit'> ...</ div >We kunnen de modifiers ook ketenen. Houd er echter rekening mee dat de volgorde van modifiers er wel degelijk toe doet en dat dit de resultaten beïnvloedt.
< tot @click.stop.prevent='doe dat'></ tot >Conclusie
In dit artikel hebben we de hele concepten voor het afhandelen van Click-gebeurtenissen behandeld, van noob tot ninja-niveau. We hebben geleerd over de verschillende syntaxis van het schrijven van klikgebeurtenissen en de verschillende manieren om |__+_| . te gebruiken richtlijn geleverd door Vue.js voor het gemak van ontwikkelaars en verschillende gebeurtenismodifiers. Voor meer nuttige inhoud zoals deze, gerelateerd aan Vue.js, blijf linuxhint.com bezoeken.