Sužinokite, kaip pagerinti įvykių tvarkymą naudojant „Vue“ v-on direktyvą.
Naudotojų įvykių klausymas yra neatskiriama bet kurios reaguojančios žiniatinklio programos dalis, o „Vue“ programos nėra išimtis. „Vue“ sukurtas naudojant paprastą ir efektyvų būdą valdyti įvykius naudojant „v-on“ direktyvą.
Kas yra įvykių privalomas Vue?
Įvykio susiejimas yra „Vue.js“ funkcija, leidžianti prijungti įvykių klausytoją prie a Dokumento objekto modelis (DOM) elementas. Kai įvyksta įvykis, įvykių klausytojas suaktyvina veiksmą arba atsaką jūsų „Vue“ programoje.
Įvykį įpareigojančius Vue galite pasiekti naudodami v-on direktyva. Ši direktyva leidžia jūsų programai klausytis naudotojo įvykių, pvz., paspaudimo, įvedimo ar klavišų paleidimo įvykių.
Norėdami pridėti įvykių klausytoją prie elemento naudodami v-on, pridėkite įvykio pavadinimą kaip parametrą prie direktyvos:
<html>
<galva>
<scenarijussrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarijus>
galva>
<kūnas>
<divid="programėlė">
<mygtukąv-on: spustelėkite="skaitiklis++">Paspausk manemygtuką>
<p>{{ skaitiklis}}p>
div>
<scenarijus>
konst app = Vue.createApp({
duomenys () {
grąžinti {
tekstas: "Vue yra nuostabus!",
skaitiklis: 0
}
}
})
app.mount(„#programa“)
scenarijus>
kūnas>
html>
Aukščiau pateiktame kodo bloke rodomas „Vue“ programos, kuri klausosi a spustelėkite įvykis. Kodo blokas naudoja a mygtuką padidinti skaitiklis reikšmė Vue egzemplioriaus duomenų ypatybėje vienu.
Aukščiau pateiktas kodo blokas susieja „JavaScript“ išraišką skaitiklis++ prie mygtuko spustelėkite renginys su v-on direktyva. Vue naudoja @ simbolį kaip trumpinį vietoj v-on direktyva dėl v-ondažnas naudojimas:
<mygtuką @spustelėkite="skaitiklis++">Paspausk manemygtuką>
Įvykių susiejimas Vue neapsiriboja paspaudimų įvykiais. „Vue“ tvarko kitus įvykius, pvz., klavišų paspaudimo įvykius, pelės žymeklio užvedimo įvykius ir kt.
Norėdami susieti bet kurį iš šių įvykių su v-on direktyvą, pakeiskite spustelėkite įvykis su norimo įvykio pavadinimu:
<mygtuką @keydown.enter="skaitiklis++">Paspausk manemygtuką>
Aukščiau pateiktas kodas nustato įvykių klausytoją mygtuką kad klauso už klavišų paspaudimas įvykis. Kai paspaudžiamas bet kuris klavišas, kol mygtukas sufokusuotas, „Vue“ įvertina skaitiklis++ išraiška.
Daugumoje „Vue“ programų galite valdyti sudėtingesnę logiką, pagrįstą konkrečiais įvykiais. Įvykiai ir metodai veikia kartu, kad būtų atlikti programos veiksmai pagal įvykį.
Metodų savybė „Vue“ parinkčių objektas turi svarbių funkcijų, kurių reikia jūsų „Vue“ programai, kad būtų padidintas reaktyvumas. Naudodami Vue metodų ypatybę, galite valdyti sudėtingą logiką, pagrįstą įvykiais.
Štai „Vue“ programos, rodančios įvykius, tvarkomus naudojant metodų nuosavybę, pavyzdys:
<html>
<galva>
<scenarijussrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarijus>
galva>
<kūnas>
<divid="programėlė">
<mygtuką @spustelėkite="padidėjimas">Pridėti 1mygtuką>
<mygtuką @spustelėkite="sumažinti">sumažinti 1mygtuką>
<p>{{ skaitiklis }}p>
div>
<scenarijus>
const app = Vue.createApp({
duomenys () {
return {
tekstas: „Vue yra nuostabus!“,
skaitiklis: 0
}
},
metodai: {
prieaugis(){
tai.skaitiklis = tai.skaitiklis + 1
},
sumažinti() {
tai.skaitiklis = tai.skaitiklis – 1
}
}
})
app.mount('#app')
scenarijus>
kūnas>
html>
Aukščiau pateiktoje „Vue“ programoje parodyta, kaip susieti įvykius su metodais. Programoje yra du mygtukai, kuriuos spustelėję vartotojai gali padidinti arba sumažinti skaitiklio vertę duomenų nuosavybėje.
Programa tai pasiekia su @spustelėkite direktyva. The @spustelėkite direktyva nurodo metodų savybėje esančias funkcijas, skirtas manipuliuoti skaitiklio reikšme.
Susiedami argumentą su paspaudimo įvykiu, galite tinkinti prieaugio ir mažinimo metodus, kad pridėtumėte arba sumažintumėte skaitiklio reikšmę, remiantis argumentu, kurį perduodate metodui.
Kaip taip:
<kūnas>
<divid="programėlė">
<mygtuką @spustelėkite="padidėjimas (5)">Pridėti 5mygtuką><mygtuką @spustelėkite="sumažinti (3)">sumažinti 3mygtuką>
<p>{{ skaitiklis }}p>
div><scenarijus>
const app = Vue.createApp({
duomenys () {
return {
tekstas: „Vue yra nuostabus!“,
skaitiklis: 0
}
},
metodai: {
prieaugis (skaičius){
tai.skaitiklis = šis.skaitiklis + skaičius
},
sumažinti (skaičius) {
tai.skaitiklis = tai.skaitiklis – skaičius
}
}
})
app.mount('#app')
scenarijus>
kūnas>
Šis kodo blokas tęsiasi ankstesnėje „Vue“ programoje, kad būtų galima perduoti argumentus metodams, susietiems su mygtuko paspaudimo įvykių klausytoju.
Metodai didinti ir sumažinti Vue egzemplioriuje naudoja argumentą num, kad padidintų arba sumažintų skaitiklio ypatybę.
Šiame pavyzdyje parodyta, kaip galite dirbti su argumentais susiedami metodus su įvykiais Vue. Metodų susiejimas su įvykiais gali padėti „Vue“ programas padaryti interaktyvesnes.
„Vue“ prevencijos ir sustabdymo modifikatorių tyrinėjimas
„Vue“ įvykių modifikatoriai leidžia sukurti geresnius įvykių klausytojus, atitinkančius konkrečius jūsų programos poreikius. Norėdami panaudoti šiuos įvykių modifikatorius, modifikatorius susiekite su įvykiais Vue.
Pavyzdžiui:
<forma @pateikti.neleisti="handleSubmit">
<įvestistipo="tekstas"v-modelis="tekstas">
<mygtukątipo="Pateikti">Pateiktimygtuką>
forma>
Viršuje esantis kodo blokas sujungia užkirsti kelią pateikimo įvykio modifikatorius. The užkirsti kelią modifikatorius dažniausiai naudojamas dirbant su formomis Vue.
The užkirsti kelią modifikatoriaus tikslas yra užkirsti kelią numatytam formos pateikimo elgesiui, ty įkelti puslapį iš naujo. Naudojant užkirsti kelią, Vue gali tęsti savo procesus, kol rankenaPateikti metodas pasirūpina formos pateikimu.
Kitas labai naudingo modifikatoriaus pavyzdys yra sustabdyti įvykių modifikatorius. The sustabdyti įvykio modifikatorius sustabdo įvykio plitimą toliau DOM medyje.
Paprastai HTML antrinio elemento įvykis burbuliuoja per DOM medį, suaktyvindamas visus įvykių klausytojus, prijungtus prie pirminių elementų. Galite tam užkirsti kelią įvykių propagavimas su sustabdyti modifikatorių ir neleisti įvykiui suaktyvinti kitų įvykių klausytojų.
Norėdami suprasti, kaip sustabdyti modifikatorius sustabdo įvykių plitimą toliau DOM medyje, apsvarstykite toliau pateiktą kodo bloką:
<kūnas>
<divid="programėlė">
<div @spustelėkite="outerClick"klasė="išorinis">
<div @spustelėkite.stop="innerClick"klasė="vidinis">
<mygtuką @spustelėkite="buttonClick"klasė="mygtukas">Paspausk manemygtuką>
div>
div>
div>
<scenarijus>
const app = Vue.createApp({
metodai: {
outerClick() {
console.log('Išorinis paspaudimas')
},
innerClick() {
console.log('Vidinis paspaudimas')
},
buttonClick() {
console.log ('mygtuko paspaudimas')
}
}
});
app.mount("#programa");
scenarijus>
kūnas>
Aukščiau pateiktame kodo bloke yra trys įvykių klausytojai, prijungti prie trijų skirtingų elementų. The mygtuką elementas yra div viduje su vidinis klasė, o div su vidinis klasė yra div viduje su išorinis klasė.
Kiekvienas iš trijų elementų klauso a spustelėkite įvykį ir žurnalus į konsolę, spustelėjo HTML elemento pavadinimą. Toliau pateikiamas papildomas klasės CSS stilius, kad būtų lengviau suprasti aukščiau pateiktą kodo bloką:
<galva>
<stilius>
.išorinis {
pamušalas: 20px;
fono spalva: juoda;
}
.inner {
pamušalas: 20px;
fono spalva: pilka;
}
mygtukas {
pamušalas: 10px;
fono spalva: balta;
kraštinė: 2px vientisa juoda;
šrifto dydis: 16 pikselių;
šrifto svoris: paryškintas;
žymeklis: rodyklė;
}
stilius>
galva>Vykdant programą sukurta „Vue“ programa atrodys taip:
Atminkite, kad spustelėjus mygtuką programa iškviečia mygtukasSpustelėkite metodą ir įrašo pranešimą į konsolę. Programa taip pat vadina vidinis Spustelėkite metodas.
Tačiau programa nekviečia išorinis paspaudimas metodas, nes kodo blokas pridėjo a sustabdyti modifikatorius į vidinis Spustelėkite renginio klausytoja. Tai sustabdo įvykio plitimą toliau DOM medyje.
Be sustabdyti modifikatorių, programa iškvies mygtukasSpustelėkite metodą, kai spustelėsite mygtuką, o įvykis toliau skleis medį ir pasieks vidinis Spustelėkite metodas ir tada išorinis paspaudimas metodas.
Įvykių tvarkymas žiniatinklio programose
Sužinojote, kaip naudoti įvykių susiejimą programoje „Vue“, kad prie elementų prijungtumėte įvykių klausytojus ir kaip iškviesti metodus, kai įvyksta įvykiai. Taip pat supratote, kaip naudoti įvykių modifikatorius įvykių elgsenai tinkinti.
Žiniatinklio programos funkcijoms atlikti naudoja tam tikrus vartotojo įvykius. „JavaScript“ yra integruota su daugybe metodų, leidžiančių užfiksuoti ir valdyti įvairius šiuos įvykius. Šie įvykiai padeda kurti interaktyvias programas.
