A Vue.js egy nagyon erőteljes, könnyen elsajátítható és megközelíthető könyvtár, amely HTML, CSS és Javascript tudásával elkezdhetjük a webes alkalmazások építését. A Vue.js a már meglévő szögletes és reakciókeret legjobb tulajdonságainak ötvözésével készült. Ez egy progresszív és reaktív Javascript keretrendszer, amelyet UI-k (felhasználói felületek) és SPA-k (egyoldalas alkalmazások) építésére használnak, ezért a fejlesztők szeretnek kódolni, és érezni a szabadságot és kényelmet, miközben fejlesztenek alkalmazásokat a Vue.js-ben. nézze meg a Vue.js.-ben található Eseményhallgatást és -kezelést, tudni fogjuk, hogy v-on irányelvet biztosít az események hallgatására és kezelésére. A v-on irányelv segítségével hallgathatjuk a DOM-ot és elvégezhetjük a szükséges feladatokat. Számos eseménykezelőt is biztosít. Ebben a cikkben azonban csak tanulni fogunk, és a kattintási eseményekre összpontosítunk. Szóval, kezdjük el!
Csakúgy, mint a Javascript onClick eseménye, a Vue.js is biztosítja a v-on: click hallgatási eseményeket.
A v-on: click esemény szintaxisa a következő lenne:
< gomb v-on: kattintson='functionName'>Kattintson</ gomb >
A Vue.js gyorsítót @ biztosít a v-on használata helyett.
< gomb @kattintás='functionName'> Kattintson</ gomb >
A Vue.js nem áll le azzal, hogy csak meghallgatja a kattintási eseményt, és meghívja a függvényt. Ez lehetővé teszi számunkra, hogy közvetlenül írjunk az aritmetikai műveleteket vagy bármit, ami a Javascripthez kapcsolódik az idézőjelek közé. Mint ez:
< gomb @kattintás='szám += 1'> Hozzáadás</ gomb >
A Vue.js lehetővé teszi számunkra, hogy meghívjuk a metódust vagy függvényt egy soron belüli Javascript utasításban, az alábbiak szerint:
< gomb @kattintás='üzenet (' Szia ')'> Megjelenítés</ gomb >A Vue.js eseménykezelőit használva elérhetjük a DOM eseményt is, inline utasítás használatával úgy, hogy a Vue.js által kifejezetten biztosított $ event változót átvisszük a módszer argumentumába, akárcsak az alábbi példa:
< gomb @kattintás='message (' Szia ', $ event)'> Küldés</ gomb >
A Vue.js több funkció vagy módszer meghívását is lehetővé teszi számunkra. Hívhatunk több függvényt is, és vesszővel elválaszthatjuk őket, például ebben a példában:
< gomb @kattintás='első (' Hello '), második (' Szia ', $ event)'> Küldés</ gomb >A Vue.js eseménymódosítókat is biztosít.
Eseménymódosítók
Az eseményekkel együtt gyakran módosítókat kell hívnunk. Tehát a Vue.js a következő módosítók közül kínál néhányat:
.álljon meg
Megállítja a kattintási esemény továbbítását.
< nak nek @click.stop='csináld ezt'></ nak nek >.megelőzni
Ez megakadályozza az oldal újratöltését vagy átirányítását.
< forma @beküld.megelőzni='onSubmit'></ forma >.egyszer
A kattintási eseményt csak egyszer aktiválja.
< nak nek @click.egyszer='csináld ezt'></ nak nek >.elfog
Leggyakrabban az eseményfigyelő hozzáadására szolgál.
< div @click.capture='csináld ezt'> ...</ div >A módosítókat is láncolhatjuk. Ne feledje azonban, hogy a módosítók sorrendje számít, és ez befolyásolja az eredményeket.
< nak nek @click.stop.prevent='csináld'></ nak nek >Következtetés
Ebben a cikkben a teljes Click eseménykezelési koncepciót ismertettük a noobtól a nindzsa szintig. Megismerkedtünk a kattintási események írásának különböző szintaxisaival és a | _+_ | a Vue.js által biztosított irányelv a fejlesztők és a különböző eseménymódosítók megkönnyítésére. A Vue.js -hez hasonló hasznosabb tartalmakért látogasson el a linuxhint.com webhelyre.