Siit saate teada, kuidas oma sündmuste haldamist Vue v-on direktiiviga täiustada.
Kasutajasündmuste kuulamine on iga tundliku veebirakenduse lahutamatu osa ja Vue rakendused pole erand. Vue on ehitatud lihtsa ja tõhusa viisiga sündmuste käsitlemiseks selle v-on direktiiviga.
Mis on sündmuste sidumine Vue's?
Sündmuste sidumine on Vue.js-i funktsioon, mis võimaldab lisada sündmusekuulaja a Dokumendiobjekti mudel (DOM) element. Kui sündmus toimub, käivitab sündmusekuulaja teie Vue rakenduses toimingu või vastuse.
Saate Vue's sündmusi siduda, kasutades v-on direktiiv. See käsk võimaldab teie rakendusel kuulata kasutaja sündmusi, nagu klõpsamine, sisestus või klahvivajutus.
Sündmuskuulaja lisamiseks elemendile kasutades v-on, lisage käskkirja parameetrina sündmuse nimi:
<html>
<pea>
<stsenaariumsrc=" https://unpkg.com/vue@3/dist/vue.global.js">stsenaarium>
pea>
<keha>
<divid="rakendus">
<nuppuv-on: klõpsake="counter++">Klõpsake mindnuppu>
<lk>{{ loendur}}lk>
div>
<stsenaarium>
konst app = Vue.createApp({
andmed() {
tagasi {
tekst: "Vue on fantastiline!",
loendur: 0
}
}
})
app.mount('#rakendus')
stsenaarium>
keha>
html>
Ülaltoodud koodiplokk näitab näidet Vue rakendusest, mis kuulab a klõpsa sündmus. Koodiplokk kasutab a nuppu suurendamiseks loendur väärtus Vue eksemplari andmeatribuudis ühe võrra.
Ülaltoodud koodiplokk seob JavaScripti avaldise loendur++ nupu juurde klõpsa üritus koos v-on direktiiv. Vue kasutab @ tähemärki stenogrammina asemel v-on direktiivi tõttu v-onsagedane kasutamine:
<nuppu @klõpsa="counter++">Klõpsake mindnuppu>
Vue sündmuste sidumine ei piirdu klõpsamissündmustega. Vue haldab muid sündmusi, nagu klahvivajutuse sündmused, hiirekursori sündmused ja palju muud.
Nende sündmuste sidumiseks v-on direktiiv asendada klõpsa sündmus soovitud sündmuse nimega:
<nuppu @keydown.enter="counter++">Klõpsake mindnuppu>
Ülaltoodud kood seadistab seadmes sündmuste kuulaja nuppu mis kuulab klahvi alla sündmus. Kui suvalisele klahvile vajutatakse, kui nupul on fookus, hindab Vue seda loendur++ väljendus.
Enamikus Vue rakendustes saate käsitleda keerukamat loogikat, mis põhineb konkreetsetel sündmustel. Sündmused ja meetodid töötavad käsikäes, et teha sündmusel põhinevaid rakenduse toiminguid.
Meetodite omadus Vue valikute objekt sisaldab olulisi funktsioone, mida teie Vue rakendus vajab täiustatud reageerimisvõime jaoks. Vue meetodite atribuudiga saate käsitleda sündmustel põhinevat keerulist loogikat.
Siin on näide Vue rakendusest, mis näitab sündmusi, mida käsitleb atribuudi meetodid:
<html>
<pea>
<stsenaariumsrc=" https://unpkg.com/vue@3/dist/vue.global.js">stsenaarium>
pea>
<keha>
<divid="rakendus">
<nuppu @klõpsa="kasv">Lisa 1nuppu>
<nuppu @klõpsa="vähendada">vähendada 1nuppu>
<lk>{{ loendur }}lk>
div>
<stsenaarium>
const app = Vue.createApp({
andmed() {
return {
tekst: "Vue on fantastiline!",
loendur: 0
}
},
meetodid: {
increment(){
see.loendur = see.loendur + 1
},
vähenda() {
see.loendur = see.loendur – 1
}
}
})
app.mount('#app')
stsenaarium>
keha>
html>
Ülaltoodud rakendus Vue kirjeldab, kuidas sündmusi meetoditega siduda. Rakendusel on kaks nuppu, millel kasutajad saavad klõpsata andmete atribuudi loenduri väärtuse suurendamiseks või vähendamiseks.
Rakendus saavutab selle rakendusega @klõps direktiiv. The @klõps direktiiv osutab funktsioonidele atribuudis meetodid loenduri väärtusega manipuleerimiseks.
Argumendi linkimisel klõpsusündmusega saate meetodile edastatud argumendi alusel loenduri väärtuse lisamiseks või vähendamiseks kohandada suurendamise ja vähendamise meetodeid.
Nagu nii:
<keha>
<divid="rakendus">
<nuppu @klõpsa="kasv (5)">Lisage 5nuppu><nuppu @klõpsa="vähendada (3)">vähendada 3nuppu>
<lk>{{ loendur }}lk>
div><stsenaarium>
const app = Vue.createApp({
andmed() {
return {
tekst: "Vue on fantastiline!",
loendur: 0
}
},
meetodid: {
juurdekasv (arv){
see.loendur = see.loendur + number
},
vähenda (arv) {
see.loendur = see.loendur - arv
}
}
})
app.mount('#app')
stsenaarium>
keha>
See koodiplokk laieneb eelmisele Vue rakendusele, et võimaldada argumentide edastamist meetoditele, mis on lingitud nupu klõpsamissündmuste kuulajaga.
Vue eksemplari suurendamise ja vähendamise meetodid kasutavad loenduri atribuudi suurendamiseks või vähendamiseks argumendi numbrit.
See näide näitab, kuidas saate Vue sündmustega meetodite linkimisel argumentidega töötada. Meetodite sidumine sündmustega võib aidata muuta Vue rakendused interaktiivsemaks.
Vue ennetamise ja peatamise modifikaatorite uurimine
Vue sündmuste modifikaatorid võimaldavad teil luua paremaid sündmuste kuulajaid, mis vastavad teie rakenduse konkreetsetele vajadustele. Nende sündmuste modifikaatorite kasutamiseks aheldate modifikaatorid Vue sündmustega.
Näiteks:
<vormi @esitama.vältida="handleSubmit">
<sisendtüüp="tekst"v-mudel="tekst">
<nupputüüp="Esita">Esitanuppu>
vormi>
Ülaltoodud koodiplokk aheldab ära hoida esitamise sündmuse muutja. The ära hoida modifikaatorit kasutatakse tavaliselt Vue vormidega töötamisel.
The ära hoida modifikaatori eesmärk on takistada vormi esitamise vaikekäitumist, milleks on lehe uuesti laadimine. Kasutades ära hoida, Vue saab oma protsesse jätkata, kui käepide Esita meetod hoolitseb vormi esitamise eest.
Teine näide väga kasulikust modifikaatorist on peatus sündmuse muutja. The peatus sündmuse modifikaator peatab sündmuse levimise DOM-puus ülespoole.
Tavaliselt muliseb HTML-i alamelemendi sündmus läbi DOM-puu, aktiveerides kõik ülemelementidega seotud sündmusekuulajad. Saate seda vältida sündmuste levik koos peatus modifikaatorit ja takistada sündmusel käivitada uusi sündmusekuulajaid.
Et mõista, kuidas peatus modifikaator peatab sündmuste levimise DOM-puust ülespoole, kaaluge allolevat koodiplokki:
<keha>
<divid="rakendus">
<div @klõpsa="outerClick"klass="välimine">
<div @kliki.peatus="innerClick"klass="sisemine">
<nuppu @klõpsa="buttonClick"klass="nupp">Klõpsake mindnuppu>
div>
div>
div>
<stsenaarium>
const app = Vue.createApp({
meetodid: {
outerClick() {
console.log('Väline klõps')
},
innerClick() {
console.log('Sisemine klõps')
},
buttonClick() {
console.log('Nupu klõps')
}
}
});
app.mount("#app");
stsenaarium>
keha>
Ülaltoodud koodiplokil on kolm sündmusekuulajat, mis on kinnitatud kolme erineva elemendi külge. The nuppu element on div sees koos sisemine klass, samas kui div koos sisemine klass on divisis koos välimine klass.
Kõik kolm elementi kuulavad a klõpsa sündmus ja logid konsooli, klõpsatud HTML-elemendi nimel. Allpool on täiendav klassi CSS-stiil, et ülaltoodud koodiplokk oleks hõlpsamini mõistetav:
<pea>
<stiilis>
.outer {
polster: 20px;
taustavärv: must;
}
.inner {
polster: 20px;
taustavärv: hall;
}
nupp {
polster: 10px;
taustavärv: valge;
ääris: 2px täismust;
fondi suurus: 16 pikslit;
fondi kaal: paks;
kursor: kursor;
}
stiilis>
pea>Programmi käivitamisel näeb loodud Vue rakendus välja selline:
Pange tähele, et kui klõpsate nuppu, kutsub programm välja nuppKlõpsa meetodit ja logib konsooli sõnumi. Programm kutsub ka üles sisemine klõps meetod.
Kuid programm ei kutsu välimine klõps meetod, kuna koodiplokk lisas a peatus modifikaator sisemine klõps sündmuste kuulaja. See peatab sündmuse levimise DOM-puus edasi.
Ilma peatus modifikaatorit, kutsub programm välja nuppKlõpsa meetodil, kui klõpsate nuppu, ja sündmus jätkab levitamist puust ülespoole, jõudes kohale sisemine klõps meetod ja seejärel välimine klõps meetod.
Sündmuste haldamine veebirakendustes
Olete õppinud, kuidas kasutada Vue's sündmuste sidumist sündmuste kuulajate lisamiseks elementidele ja kuidas sündmuste esinemisel meetodeid kutsuda. Olete ka aru saanud, kuidas sündmuste teisendajaid sündmuste käitumise kohandamiseks kasutada.
Veebirakendused toetuvad funktsioonide täitmiseks teatud tüüpi kasutaja sündmustele. JavaScript on sisseehitatud paljude meetodite abil mitmesuguste sündmuste jäädvustamiseks ja käsitlemiseks. Need sündmused aitavad luua interaktiivseid rakendusi.