Vue.js on erittäin tehokas, helposti opittava ja helposti lähestyttävä kirjasto, jonka HTML-, CSS- ja Javascript -tuntemuksella voimme alkaa rakentaa siihen verkkosovelluksia. Vue.js on rakennettu yhdistämällä jo olemassa olevien Angular- ja React -kehysten parhaat ominaisuudet. Se on progressiivinen ja reaktiivinen Javascript-kehys, jota käytetään käyttöliittymien (käyttöliittymien) ja SPA-alueiden (yhden sivun sovellukset) rakentamiseen, minkä vuoksi kehittäjät rakastavat koodata ja tuntea vapauden ja mukavuuden kehittäessään sovelluksia Vue.js-sivustossa. Katso tapahtumien kuuntelu ja käsittely osoitteessa Vue.js., tiedämme, että se tarjoaa v-on-direktiivin kuunnella ja käsitellä tapahtumia. Voimme käyttää v-on-direktiiviä DOM: n kuuntelemiseen ja tarvittavien tehtävien suorittamiseen. Se tarjoaa myös monia tapahtumien käsittelijöitä. Tässä artikkelissa opimme kuitenkin vain ja keskitymme napsautustapahtumiin. Joten, aloitetaan!
Aivan kuten Javascriptin onClick-tapahtuma, Vue.js tarjoaa v-on: click kuuntelutapahtumiin.
V-on: click -tapahtuman syntaksi olisi seuraava:
< -painiketta v-on: napsauta='functionName'>Klikkaus</ -painiketta >
Vue.js tarjoaa lyhenteen @ sen sijaan, että käytät v-onia.
< -painiketta @klikkaus='functionName'> Napsauta</ -painiketta >
Vue.js ei lopu pelkästään kuuntelemalla klikkaustapahtumaa ja kutsumalla toimintoa. Sen avulla voimme myös kirjoittaa suoraan aritmeettiset operaatiot tai kaikki Javascriptiin liittyvät lainausmerkeihin. Juuri näin:
< -painiketta @klikkaus='numero += 1'> Lisää</ -painiketta >
Vue.js antaa meille mahdollisuuden kutsua menetelmä tai funktio sisäänrakennetussa Javascript -käskyssä, kuten alla on esitetty:
< -painiketta @klikkaus='viesti (' Hei ')'> Näytä</ -painiketta >Käyttämällä Vue.js: n tapahtumakäsittelijöitä voimme päästä myös DOM -tapahtumaan inline -lausetta käyttämällä välittämällä Vue.js: n erityisesti tarjoaman $ event -muuttujan menetelmän argumenttiin, aivan kuten alla oleva esimerkki:
< -painiketta @klikkaus='message (' Hei ', $ event)'> Lähetä</ -painiketta >
Vue.js tarjoaa myös mahdollisuuden kutsua useita toimintoja tai menetelmiä. Voimme kutsua useamman kuin yhden funktion ja erottaa ne pilkuilla, kuten tässä esimerkissä:
< -painiketta @klikkaus='ensimmäinen (' Hei '), toinen (' Hei ', $ tapahtuma)'> Lähetä</ -painiketta >Vue.js tarjoaa myös tapahtumamuokkaimia.
Tapahtuman muokkaajat
Meidän on usein kutsuttava muokkaajat tapahtumien mukana. Joten Vue.js tarjoaa joitain seuraavista muokkauksista:
.lopettaa
Se pysäyttää napsautustapahtuman lähetyksen.
< kohteeseen @click.stop='toimi näin'></ kohteeseen >.estää
Se estää sivun lataamisen tai uudelleenohjaamisen.
< muodossa @lähetä. estä='onSubmit'></ muodossa >.kerran
Se laukaisee napsautustapahtuman vain kerran.
< kohteeseen @click.once='toimi näin'></ kohteeseen >.kaapata
Sitä käytetään enimmäkseen tapahtuman kuuntelijan lisäämiseen.
< div @click.capture='toimi näin'> ...</ div >Voimme myös ketjuttaa muokkaajat. Muista kuitenkin, että muokkausten järjestyksellä on väliä ja se vaikuttaa tuloksiin.
< kohteeseen @click.stop.prevent='tehdä'></ kohteeseen >Johtopäätös
Tässä artikkelissa olemme käsitelleet koko Click -tapahtumakäsittelyn käsitteet noobista ninja -tasoon. Olemme oppineet napsautustapahtumien kirjoittamisen eri syntakseista ja erilaisista käyttötavoista | _+_ | Vue.js: n antama direktiivi kehittäjien ja eri tapahtumamuokkainten helpottamiseksi. Saat lisää tällaista hyödyllistä sisältöä, joka liittyy Vue.js -tiedostoon, käymällä osoitteessa linuxhint.com.