Vue.js je veľmi výkonná, ľahko sa učí a je prístupná knižnica, ktorá so znalosťou HTML, CSS a Javascriptu v nej môže začať vytvárať webové aplikácie. Vue.js je zostavený kombináciou najlepších funkcií z už existujúcich rámcov Angular a React. Jedná sa o progresívny a reaktívny rámec Javascript, ktorý sa používa na vytváranie používateľských rozhraní (používateľské rozhrania) a SPA (jednostránkové aplikácie), a preto vývojári radi kódujú a pri vývoji aplikácií vo Vue.js. cítia slobodu a pohodlie. Ak pozrite sa na počúvanie a spracovanie udalostí vo Vue.js., budeme vedieť, že poskytuje direktívu v-on na počúvanie a spracovanie udalostí. Na počúvanie modelu DOM a vykonanie požadovaných úloh môžeme použiť smernicu v-on. Poskytuje tiež mnoho obsluh udalostí. V tomto článku sa však budeme len učiť a sústrediť sa na udalosti kliknutí. Začnime teda!
Rovnako ako udalosť onClick v jazyku Javascript, Vue.js poskytuje v-on: kliknutie na počúvanie udalostí.
Syntax pre udalosť v-on: click bude nasledovná:
< tlačidlo v-on: kliknite='functionName'>Kliknite</ tlačidlo >
Vue.js poskytuje skratku @ namiesto použitia v-on.
< tlačidlo @kliknite='functionName'> Kliknite</ tlačidlo >
Vue.js neprestáva len počúvať udalosť kliknutia a volať funkciu. Umožní nám to tiež priamo napísať do úvodzoviek všetky aritmetické operácie alebo čokoľvek súvisiace s jazykom Javascript. Presne takto:
< tlačidlo @kliknite='num += 1'> Pridať</ tlačidlo >
Vue.js nám umožňuje volať metódu alebo funkciu v vloženom vyhlásení JavaScriptu, ako je uvedené nižšie:
< tlačidlo @kliknite='message (' Ahoj ')'> Zobraziť</ tlačidlo >Pomocou obslužných rutín udalostí Vue.js sa môžeme dostať aj k udalosti DOM pomocou vloženého príkazu tak, že do argumentu metódy prenesieme špeciálne poskytnutú premennú $ event Vue.js, podobne ako v nasledujúcom prípade:
< tlačidlo @kliknite='message (' Ahoj ', $ udalosť)'> Odoslať</ tlačidlo >
Vue.js nám tiež umožňuje volať viac funkcií alebo metód. Môžeme zavolať viac ako jednu funkciu a oddeliť ich čiarkami, ako napríklad v tomto prípade:
< tlačidlo @kliknite='first (' Hello '), second (' Hi ', $ event)'> Odoslať</ tlačidlo >Vue.js poskytuje aj modifikátory udalostí.
Modifikátory udalostí
Spolu s udalosťami často potrebujeme zavolať aj modifikátory. Vue.js teda ponúka niektoré z nasledujúcich modifikátorov:
.stop
Zastaví prenos udalosti kliknutia.
< do @click.stop='to urobiť'></ do >.predchádzať
Zabráni sa tým opätovnému načítaniu alebo presmerovaniu stránky.
< forma @submit.prevent='onSubmit'></ forma >.jedenkrát
Udalosť kliknutia sa spustí iba raz.
< do @klikni.jeden='to urobiť'></ do >.chytanie
Väčšinou sa používa na pridanie poslucháča udalostí.
< div @click.capture='to urobiť'> ...</ div >Môžeme tiež reťaziť modifikátory. Majte však na pamäti, že na poradí modifikátorov záleží a bude to mať vplyv na výsledky.
< do @click.stop.prevent='urob to'></ do >Záver
V tomto článku sme pokryli celé koncepty spracovania udalostí Click od úrovne noob po ninja. Dozvedeli sme sa o rôznych syntaxach zápisu udalostí kliknutia a rôznych spôsoboch použitia | _+_ | smernica poskytovaná Vue.js pre jednoduchosť vývojárov a rôznych modifikátorov udalostí. Ak chcete získať ďalší užitočný obsah, ako je tento, súvisiaci s súborom Vue.js, navštívte stránku linuxhint.com.