Vue.js er et meget kraftfuldt, let at lære og tilgængeligt bibliotek, der med kendskab til HTML, CSS og Javascript kan begynde at bygge webapplikationer i det. Vue.js er bygget ved at kombinere de bedste funktioner fra allerede eksisterende Angular og react Frameworks. Det er en progressiv og reaktiv Javascript-ramme, der bruges til at bygge UI'er (brugergrænseflader) og SPA'er (enkeltsidede applikationer), hvorfor udviklerne elsker at kode og føle frihed og komfort, mens de udvikler applikationer i Vue.js.Hvis vi tag et kig på Event Listening and Handling i Vue.js., vi ved, at det giver et v-on-direktiv til at lytte og håndtere begivenheder. Vi kan bruge v-on-direktivet til at lytte til DOM og udføre de nødvendige opgaver. Det giver også mange event -behandlere. I denne artikel lærer vi imidlertid kun og holder fokus på klikhændelserne. Så lad os komme i gang!
Ligesom Javascripts onClick-begivenhed, tilbyder Vue.js v-on: click for at lyttehændelser.
Syntaksen for v-on: click-begivenhed ville være sådan:
< knap v-on: klik='funktionsnavn'>Klik på</ knap >
Vue.js giver også en stenografi @ i stedet for at bruge v-on.
< knap @klik='funktionsnavn'> Klik</ knap >
Vue.js stopper ikke med bare at lytte til klikhændelsen og kalde funktionen. Det vil også give os mulighed for direkte at skrive enhver regnefunktion eller noget relateret til Javascript inde i anførselstegnene. Lige sådan her:
< knap @klik='num += 1'> Tilføj</ knap >
Vue.js giver os mulighed for at kalde metoden eller funktionen i en inline Javascript -erklæring, som vist nedenfor:
< knap @klik='besked (' Hej ')'> Vis</ knap >Ved hjælp af Vue.js’s hændelsesbehandlere kan vi også få adgang til DOM -hændelsen ved hjælp af inline -sætning ved at sende Vue.js’s specielt leverede $ hændelsesvariabel til metodens argument, ligesom eksemplet herunder:
< knap @klik='besked (' Hej ', $ begivenhed)'> Send</ knap >
Vue.js giver os også mulighed for at kalde flere funktioner eller metoder. Vi kan kalde mere end én funktion og adskille dem med kommaer, som dette eksempel:
< knap @klik='første (' Hej '), anden (' Hej ', $ begivenhed)'> Send</ knap >Vue.js giver også hændelsesmodifikatorer.
Begivenhedsmodifikatorer
Vi har ofte brug for at kalde modifikatorer sammen med begivenhederne. Så Vue.js giver nogle af følgende modifikatorer:
.hold op
Det stopper klikbegivenhedens transmission.
< til @click.stop='gør dette'></ til >.forhindre
Det forhindrer siden i at genindlæse eller omdirigere.
< form @indsende. forhindre='onSend'></ form >.enkelt gang
Det udløser kun klikhændelsen én gang.
< til @klik. engang='gør dette'></ til >.fange
Det bruges mest til at tilføje begivenhedslytteren.
< div @click.capture='gør dette'> ...</ div >Vi kan også kæde modifikatorerne. Husk dog, at rækkefølgen af modifikatorer har betydning, og det vil påvirke resultaterne.
< til @click.stop.prevent='gøre det'></ til >Konklusion
I denne artikel har vi dækket hele Click begivenhedshåndteringskoncepter fra noob til ninja -niveau. Vi har lært om de forskellige syntakser ved at skrive klikhændelser og de forskellige måder at bruge | _+_ | direktiv givet af Vue.js for at lette udviklere og forskellige hændelsesmodifikatorer. For mere nyttigt indhold som dette, relateret til Vue.js, skal du fortsætte med at besøge linuxhint.com.