Vue.js er et veldig kraftig, lettlært og tilgjengelig bibliotek som med kunnskap om HTML, CSS og Javascript kan begynne å bygge webapplikasjoner i det. Vue.js er bygget ved å kombinere de beste funksjonene fra allerede eksisterende Angular og react Frameworks. Det er et progressivt og reaktivt Javascript-rammeverk som brukes til å bygge brukergrensesnitt (brukergrensesnitt) og SPA (enkeltsidede applikasjoner), og derfor utviklerne elsker å kode og føle frihet og komfort mens de utvikler applikasjoner i Vue.js.Hvis vi ta en titt på hendelseslytting og håndtering i Vue.js., vi vet at det gir et v-on-direktiv for å lytte og håndtere hendelser. Vi kan bruke v-on-direktivet til å lytte til DOM og utføre de nødvendige oppgavene. Det gir også mange hendelsesbehandlere. I denne artikkelen vil vi imidlertid bare lære og holde fokus på klikkhendelsene. Så, la oss komme i gang!
På samme måte som Javascripts onClick-hendelse, tilbyr Vue.js v-on: click for å lytte til hendelser.
Syntaksen for v-on: click-hendelsen vil være slik:
< knapp v-on: klikk='funksjonsnavn'>Klikk</ knapp >
Vue.js gir en stenografi @ i stedet for å bruke v-on også.
< knapp @klikk='funksjonsnavn'> Klikk</ knapp >
Vue.js slutter ikke med å bare lytte til klikkhendelsen og ringe funksjonen. Det vil også tillate oss å skrive enhver regnefunksjon eller noe relatert til Javascript direkte i anførselstegnene. Akkurat som dette:
< knapp @klikk='num += 1'> Legg til</ knapp >
Vue.js gir oss mulighet til å kalle metoden eller funksjonen i en innebygd Javascript -setning, som vist nedenfor:
< knapp @klikk='melding (' Hei ')'> Vis</ knapp >Ved å bruke Vue.js hendelsesbehandlere, kan vi også få tilgang til DOM -hendelsen ved hjelp av inline -setning ved å sende Vue.js spesialtilpassede $ hendelsesvariabel inn i metodens argument, akkurat som eksemplet nedenfor:
< knapp @klikk='melding (' Hei ', $ hendelse)'> Send</ knapp >
Vue.js gir oss også mulighet til å kalle flere funksjoner eller metoder. Vi kan kalle mer enn én funksjon og skille dem med kommaer, som dette eksempelet:
< knapp @klikk='første (' Hei '), andre (' Hei ', $ hendelse)'> Send inn</ knapp >Vue.js gir også hendelsesmodifikatorer.
Hendelsesmodifikatorer
Vi trenger ofte å ringe modifikatorer sammen med hendelsene. Så, Vue.js gir noen av følgende modifikatorer:
.Stoppe
Det vil stoppe overføringen av klikkhendelsen.
< til @click.stop='gjør dette'></ til >.forhindre
Det forhindrer at siden lastes inn på nytt eller omdirigeres.
< skjema @submit.prevent='onSend'></ skjema >.en gang
Det vil utløse klikkhendelsen bare én gang.
< til @klikk. en gang='gjør dette'></ til >.fangst
Det brukes mest for å legge til hendelseslytteren.
< div @click.capture='gjør dette'> ...</ div >Vi kan også kjede modifikatorene. Vær imidlertid oppmerksom på at rekkefølgen på modifikatorer betyr noe, og det vil påvirke resultatene.
< til @click.stop.prevent='gjør det'></ til >Konklusjon
I denne artikkelen har vi dekket hele Click hendelseshåndteringskonseptene fra noob til ninja -nivå. Vi har lært om de forskjellige syntaksene for å skrive klikkhendelser og de forskjellige måtene å bruke | _+_ | direktiv gitt av Vue.js for enkelhet for utviklere og forskjellige hendelsesmodifikatorer. For mer nyttig innhold som dette, relatert til Vue.js, fortsett å besøke linuxhint.com.