Vue.js este o bibliotecă foarte puternică, ușor de învățat și accesibilă, care, având cunoștințe de HTML, CSS și Javascript, putem începe să construim aplicații web în ea. Vue.js este construit prin combinarea celor mai bune caracteristici din cadrele Angular și React deja existente. Este un cadru Javascript progresiv și reactiv care este utilizat pentru a construi interfețe UI (interfețe utilizator) și SPA-uri (aplicații cu o singură pagină), motiv pentru care dezvoltatorii adoră codificarea și simt libertatea și confortul în timp ce dezvoltă aplicații în Vue.js. aruncați o privire la Ascultarea și gestionarea evenimentelor în Vue.js., vom ști că oferă o directivă v-on pentru a asculta și gestiona evenimentele. Putem folosi directiva v-on pentru a asculta DOM și a efectua sarcinile necesare. De asemenea, oferă numeroase gestionare de evenimente. Cu toate acestea, în acest articol, vom învăța și ne vom concentra doar asupra evenimentelor cu clicuri. Deci sa începem!
La fel ca evenimentul onClick al Javascript, Vue.js oferă v-on: faceți clic pentru ascultarea evenimentelor.
Sintaxa pentru evenimentul v-on: click ar fi astfel:
< buton v-on: faceți clic=„numeFuncție”>Clic</ buton >
Vue.js oferă o scurtătură @ în loc să folosească și v-on.
< buton @clic=„numeFuncție”> Faceți clic pe</ buton >
Vue.js nu se oprește doar în a asculta evenimentul de clic și a apela funcția. De asemenea, ne va permite să scriem direct orice operație aritmetică sau orice altceva legat de Javascript în ghilimele. La fel ca aceasta:
< buton @clic=„num + + 1”> Adăugați</ buton >
Vue.js ne oferă să apelăm metoda sau funcția într-o declarație Javascript în linie, așa cum se arată mai jos:
< buton @clic=„mesaj („ Bună ”)”> Arată</ buton >Folosind gestionarele de evenimente Vue.js, putem accesa și evenimentul DOM, folosind instrucțiunea inline, trecând variabila $ Event a specificației Vue.js în argumentul metodei, la fel ca în exemplul de mai jos:
< buton @clic='mesaj (' Bună ', $ eveniment)'> Trimite</ buton >
Vue.js ne oferă, de asemenea, să apelăm mai multe funcții sau metode. Putem apela mai multe funcții și le putem separa prin virgule, ca în acest exemplu:
< buton @clic='first (' Hello '), al doilea (' Hello ', $ event)'> Trimiteți</ buton >Vue.js oferă și modificatori de evenimente.
Modificatori de evenimente
De multe ori trebuie să apelăm modificatori împreună cu evenimentele. Deci, Vue.js oferă câteva dintre următoarele modificări:
.Stop
Se va opri transmiterea evenimentului de clic.
< la @ click.stop='fa asta'></ la >.împiedica
Va împiedica reîncărcarea sau redirecționarea paginii.
< formă @ submit.prevent=„onSubmit”></ formă >.o singura data
Acesta va declanșa evenimentul de clic o singură dată.
< la @ click.once='fa asta'></ la >.captură
Este folosit mai ales pentru a adăuga ascultătorul de evenimente.
< div @ click.capture='fa asta'> ...</ div >Putem înlănțui și modificatorii. Cu toate acestea, rețineți că ordinea modificatorilor contează și va afecta rezultatele.
< la @ click.stop.prevent='fa aia'></ la >Concluzie
În acest articol, am acoperit întregul concept de gestionare a evenimentelor Click de la nivel noob la ninja. Am aflat despre diferitele sintaxe ale scrierii evenimentelor de clic și despre diferitele moduri de utilizare v-on:click directivă furnizată de Vue.js pentru ușurința dezvoltatorilor și a diferiților modificatori de evenimente. Pentru conținut mai util ca acesta, legat de Vue.js, continuați să accesați linuxhint.com.