Vue.js je zelo zmogljiva, enostavna za učenje in dostopna knjižnica, ki lahko z znanjem HTML, CSS in Javascript v njej začnemo graditi spletne aplikacije. Vue.js je zgrajen tako, da združuje najboljše funkcije že obstoječih ogrodnih in reakcijskih okvirov. Gre za progresivno in reaktivno ogrodje Javascript, ki se uporablja za izdelavo uporabniških vmesnikov (uporabniški vmesniki) in SPA (enostranske aplikacije), zato razvijalci radi kodirajo in čutijo svobodo in udobje pri razvoju aplikacij v Vue.js. poglejte Prisluškovanje in vodenje dogodkov v Vue.js., vedeli bomo, da zagotavlja v-on direktivo za poslušanje in vodenje dogodkov. Za poslušanje DOM-a in izvajanje zahtevanih nalog lahko uporabimo direktivo v-on. Ponuja tudi številne upravljavce dogodkov. Vendar se bomo v tem članku le naučili in se osredotočili na dogodke klikov. Torej, začnimo!
Tako kot Javascript-ov dogodek onClick tudi Vue.js ponuja v-on: click za poslušanje dogodkov.
Sintaksa dogodka v-on: click bi bila takšna:
< gumb v-on: kliknite='functionName'>Kliknite</ gumb >
Vue.js ponuja okrajšavo @ namesto uporabe v-on.
< gumb @click='functionName'> Kliknite</ gumb >
Vue.js se ne ustavi samo pri poslušanju dogodka klika in klicanju funkcije. Omogočil nam bo tudi, da v narekovaje neposredno napišemo katero koli aritmetično operacijo ali karkoli, kar je povezano z Javascript. Tako kot to:
< gumb @click='število += 1'> Dodaj</ gumb >
Vue.js nam omogoča, da pokličemo metodo ali funkcijo v vgrajenem stavku Javascript, kot je prikazano spodaj:
< gumb @click='message (' Živjo ')'> Pokaži</ gumb >Z upravljalniki dogodkov Vue.js lahko dostopamo tudi do dogodka DOM z uporabo vdelanega stavka tako, da v argument metode posredujemo posebej podano spremenljivko $ event Vue.js, tako kot spodnji primer:
< gumb @click='message (' Živjo ', $ event)'> Pošlji</ gumb >
Vue.js nam omogoča tudi klic več funkcij ali metod. Lahko pokličemo več kot eno funkcijo in jih ločimo z vejicami, na primer ta primer:
< gumb @click='first (' Pozdravljeni '), second (' Živjo ', $ event)'> Predloži</ gumb >Vue.js ponuja tudi modifikatorje dogodkov.
Modifikatorji dogodkov
Pogosto moramo skupaj z dogodki poklicati tudi modifikatorje. Tako Vue.js ponuja nekaj naslednjih modifikatorjev:
.ustavi
Prenesel bo prenos dogodka klika.
< do @click.stop='To storite'></ do >.prepreči
To bo preprečilo ponovno nalaganje ali preusmeritev strani.
< oblika @submit.prevent='onSubmit'></ oblika >. enkrat
Dogodek klika bo sprožil le enkrat.
< do @click.once='To storite'></ do >.capture
Večinoma se uporablja za dodajanje poslušalca dogodkov.
< div @click.capture='To storite'> ...</ div >Modifikatorje lahko tudi verižimo. Vendar ne pozabite, da je vrstni red modifikatorjev pomemben in bo vplival na rezultate.
< do @click.stop.prevent='naredi to'></ do >Zaključek
V tem članku smo zajeli celoten koncept upravljanja dogodkov Click od noob do ninja ravni. Spoznali smo različne sintakse pisanja dogodkov klikov in različne načine uporabe | _+_ | direktivo, ki jo ponuja Vue.js za lažje razvijalce in različne modifikatorje dogodkov. Za bolj uporabno vsebino, kot je ta, v zvezi z Vue.js, obiščite linuxhint.com.