Vue.js je vrlo moćna, laka za učenje i pristupačna knjižnica koja sa znanjem HTML -a, CSS -a i Javascripta u njoj možemo početi graditi web aplikacije. Vue.js je napravljen kombiniranjem najboljih značajki iz već postojećih Angular i React Frameworks. To je progresivni i reaktivni Javascript okvir koji se koristi za izradu korisničkih sučelja (korisnička sučelja) i SPA (aplikacije na jednoj stranici), zbog čega programeri vole kodirati i osjećati slobodu i udobnost dok razvijaju aplikacije u Vue.js.Ako bacite pogled na Slušanje i rukovanje događajima u Vue.js., znat ćemo da pruža v-on direktivu za slušanje i rukovanje događajima. Pomoću v-on direktive možemo slušati DOM i izvršavati potrebne zadatke. Također nudi mnoge rukovatelje događajima. Međutim, u ovom ćemo članku samo učiti i zadržati fokus na događajima klika. Dakle, krenimo!
Baš kao i Javascript-ov onClick događaj, Vue.js pruža v-on: click za slušanje događaja.
Sintaksa za događaj v-on: click bila bi sljedeća:
< dugme v-on: kliknite='functionName'>Klik</ dugme >
Vue.js nudi kratica @ umjesto korištenja v-on-a.
< dugme @klik='functionName'> Kliknite</ dugme >
Vue.js ne staje samo u slušanju događaja klika i pozivanju funkcije. Također će nam omogućiti da unutar navodnika izravno upišemo bilo koju aritmetičku operaciju ili bilo što vezano uz Javascript. Bas ovako:
< dugme @klik='broj += 1'> Dodaj</ dugme >
Vue.js nam omogućuje da pozovemo metodu ili funkciju u umetnutom Javascript izrazu, kao što je prikazano u nastavku:
< dugme @klik='message (' Bok ')'> Prikaži</ dugme >Koristeći Vue.js -ove upravljače događajima, možemo pristupiti i DOM događaju, koristeći inline naredbu, prosljeđujući posebno dodijeljenu varijablu $ event Vue.js -a u argument metode, baš kao u donjem primjeru:
< dugme @klik='message (' Bok ', $ event)'> Pošalji</ dugme >
Vue.js nam također omogućuje pozivanje više funkcija ili metoda. Možemo pozvati više funkcija i odvojiti ih zarezima, poput ovog primjera:
< dugme @klik='first (' Zdravo '), second (' Bok ', $ event)'> Predaj</ dugme >Vue.js nudi i modifikatore događaja.
Modifikatori događaja
Često moramo pozvati modifikatore zajedno s događajima. Dakle, Vue.js nudi neke od sljedećih modifikatora:
.Stop
Zaustavit će prijenos događaja klika.
< do @click.stop='napravi to'></ do >.spriječiti
To će spriječiti ponovno učitavanje ili preusmjeravanje stranice.
< oblik @podnijeti.spriječiti='onSubmit'></ oblik >.jednom
Pokrenut će događaj klika samo jednom.
< do @click.once='napravi to'></ do >.uhvatiti
Uglavnom se koristi za dodavanje slušatelja događaja.
< div @click.capture='napravi to'> ...</ div >Modifikatore možemo povezati i lancem. No, imajte na umu da je redoslijed modifikatora važan i da će utjecati na rezultate.
< do @click.stop.prevent='učiniti'></ do >Zaključak
U ovom smo članku obradili cijeli koncept upravljanja događajima Click od noob do ninja razine. Učili smo o različitim sintaksama pisanja događaja klika i različitim načinima korištenja | _+_ | Direktiva koju je dao Vue.js radi jednostavnosti programera i različitih modifikatora događaja. Za korisnije sadržaje poput ovog, koji se odnose na Vue.js, nastavite posjećivati linuxhint.com.