Vue.js on väga võimas, hõlpsasti õpitav ja ligipääsetav teek, mille HTML-, CSS- ja Javascripti -teadmistega saame hakata sellesse veebirakendusi ehitama. Vue.js on loodud, ühendades juba olemasolevate Angular- ja reageerimisraamistike parimad omadused. See on progressiivne ja reaktiivne Javascripti raamistik, mida kasutatakse kasutajaliideste (kasutajaliideste) ja SPA-de (ühelehelised rakendused) loomiseks, mistõttu arendajatele meeldib Vue.js-is rakendusi arendades kodeerida ning tunda vabadust ja mugavust. Vaadake sündmuste kuulamist ja käsitlemist saidil Vue.js., me teame, et see annab sündmuste kuulamiseks ja käsitlemiseks v-on direktiivi. Saame kasutada v-on direktiivi DOM-i kuulamiseks ja nõutavate ülesannete täitmiseks. Samuti pakub see palju sündmuste käitlejaid. Kuid selles artiklis me ainult õpime ja keskendume klikkide sündmustele. Niisiis, alustame!
Nii nagu Javascripti onClicki sündmus, pakub ka Vue.js v-on: click, et kuulata sündmusi.
Sündmuse v-on: click süntaks oleks järgmine:
< nuppu v-on: klõpsake='functionName'>Klõpsake nuppu</ nuppu >
Vue.js pakub ka v-oni kasutamise asemel lühendit @.
< nuppu @klõps='functionName'> Klõpsake</ nuppu >
Vue.js ei peatu pelgalt klõpsusündmuse kuulamisel ja funktsiooni helistamisel. See võimaldab meil ka jutumärkidesse kirjutada mis tahes aritmeetilised toimingud või kõik, mis on seotud Javascriptiga. Just nii:
< nuppu @klõps='number += 1'> Lisa</ nuppu >
Vue.js annab meile võimaluse kutsuda meetodit või funktsiooni sisseehitatud Javascripti avalduses, nagu allpool näidatud:
< nuppu @klõps='sõnum (' Tere ')'> Näita</ nuppu >Kasutades Vue.js -i sündmuste käitlejaid, pääseme ka DOM -i sündmusele juurde, kasutades inline -lauset, edastades meetodi argumenti Vue.js -i spetsiaalselt pakutud muutuja $ event, nagu allpool toodud näide:
< nuppu @klõps='sõnum (' Tere ', $ event)'> Saada</ nuppu >
Vue.js võimaldab meil kutsuda ka mitmeid funktsioone või meetodeid. Võime helistada rohkem kui ühele funktsioonile ja eraldada need komadega, nagu see näide:
< nuppu @klõps='esimene (' Tere '), teine (' Tere ', $ event)'> Esita</ nuppu >Vue.js pakub ka sündmuste modifikaatoreid.
Sündmuste muutjad
Sageli peame koos sündmustega kutsuma muutjaid. Niisiis pakub Vue.js mõnda järgmistest modifikaatoritest:
.peatus
See peatab klikisündmuse edastamise.
< et @click.stop='tee seda'></ et >. ennetada
See takistab lehe uuesti laadimist või ümbersuunamist.
< vormi @esitama='onSubmit'></ vormi >.kord
See käivitab klikisündmuse ainult üks kord.
< et @click.once='tee seda'></ et >.püüdmine
Seda kasutatakse enamasti sündmuse kuulaja lisamiseks.
< div @click.capture='tee seda'> ...</ div >Võime aheldada ka modifikaatoreid. Pidage siiski meeles, et modifikaatorite järjekord on oluline ja see mõjutab tulemusi.
< et @click.stop.prevent='tee seda'></ et >Järeldus
Selles artiklis oleme käsitlenud kõiki Click -sündmuste käsitlemise kontseptsioone noobist ninja tasemeni. Oleme õppinud klõpsusündmuste kirjutamise erinevate süntaksite ja erinevate kasutusviiside kohta | _+_ | arendajate ja erinevate sündmuste muutjate lihtsustamiseks Vue.js poolt antud direktiiv. Sellise kasuliku sisu jaoks, mis on seotud Vue.js -ga, külastage jätkuvalt linuxhint.com.