Uzziniet, kā uzlabot notikumu apstrādi, izmantojot Vue v-on direktīvu.
Lietotāju notikumu klausīšanās ir jebkuras adaptīvas tīmekļa lietotnes neatņemama sastāvdaļa, un Vue lietotnes nav izņēmums. Vue ir izveidots ar vienkāršu un efektīvu veidu, kā rīkoties ar notikumiem, izmantojot v-on direktīvu.
Kas ir notikumu saistošs pakalpojumā Vue?
Notikumu saistīšana ir Vue.js līdzeklis, kas ļauj pievienot notikumu uztvērēju a Dokumenta objekta modelis (DOM) elements. Kad notiek notikums, notikumu uztvērējs aktivizē darbību vai atbildi jūsu lietotnē Vue.
Jūs varat panākt saistošu notikumu Vue, izmantojot v-on direktīva. Šī direktīva ļauj jūsu lietotnei klausīties lietotāju notikumus, piemēram, noklikšķināšanas, ievadīšanas vai taustiņu ievadīšanas notikumus.
Lai elementam pievienotu notikumu klausītāju, izmantojot v-on, pievienojiet notikuma nosaukumu kā parametru direktīvai:
<html>
<galvu>
<skriptssrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripts>
galvu>
<ķermeni>
<divid="lietotne">
<poguv-on: noklikšķiniet="skaitītājs++">Noklikšķiniet uz manispogu>
<lpp>{{ skaitītājs}}lpp>
div>
<skripts>
konst app = Vue.createApp({
dati() {
atgriezties {
teksts: "Vue ir lieliski!",
skaitītājs: 0
}
}
})
app.mount("#app")
skripts>
ķermeni>
html>
Iepriekš redzamajā koda blokā ir parādīts Vue lietotnes piemērs, kas klausās a klikšķis notikumu. Kodu bloks izmanto a pogu lai palielinātu skaitītājs vērtība Vue instances datu rekvizītā par vienu.
Iepriekš minētais koda bloks saista JavaScript izteiksmi skaitītājs++ uz pogas klikšķis pasākums ar v-on direktīva. Vue izmanto @ rakstzīmi kā stenogrammu vietā v-on direktīva sakarā ar v-onbieža lietošana:
<pogu @klikšķis="skaitītājs++">Noklikšķiniet uz manispogu>
Notikumu saistīšana pakalpojumā Vue neaprobežojas tikai ar klikšķu notikumiem. Vue apstrādā citus notikumus, piemēram, taustiņu nospiešanas notikumus, kursora novietošanas notikumus un citus notikumus.
Lai saistītu kādu no šiem notikumiem ar v-on direktīvu, aizstāt klikšķis pasākums ar vēlamā pasākuma nosaukumu:
<pogu @keydown.enter="skaitītājs++">Noklikšķiniet uz manispogu>
Iepriekš minētais kods iestata notikumu uztvērēju pogu kas klausās par taustiņu noslēgšana notikumu. Kad tiek nospiests kāds taustiņš, kamēr pogai ir fokuss, Vue novērtē skaitītājs++ izteiksme.
Lielākajā daļā Vue lietotņu varat rīkoties ar sarežģītāku loģiku, pamatojoties uz konkrētiem notikumiem. Notikumi un metodes darbojas roku rokā, lai veiktu lietotnes darbības, pamatojoties uz notikumu.
Metožu īpašums iekšā Vue opciju objekts satur svarīgas funkcijas, kas jūsu Vue lietotnei nepieciešamas, lai uzlabotu reaģētspēju. Izmantojot Vue metožu īpašumu, varat apstrādāt sarežģītu loģiku, kuras pamatā ir notikumi.
Šeit ir Vue lietotnes piemērs, kurā tiek rādīti notikumi, kas tiek apstrādāti, izmantojot metožu īpašumu:
<html>
<galvu>
<skriptssrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripts>
galvu>
<ķermeni>
<divid="lietotne">
<pogu @klikšķis="pieaugums">Pievienojiet 1pogu>
<pogu @klikšķis="samazināt">samazināt 1pogu>
<lpp>{{ skaitītājs }}lpp>
div>
<skripts>
const app = Vue.createApp({
dati() {
return {
teksts: "Vue ir lieliski!",
skaitītājs: 0
}
},
metodes: {
pieaugums(){
šis.skaitītājs = šis.skaitītājs + 1
},
samazināt() {
šis.skaitītājs = šis.skaitītājs — 1
}
}
})
app.mount('#app')
skripts>
ķermeni>
html>
Iepriekš minētajā lietotnē Vue ir parādīts, kā saistīt notikumus ar metodēm. Lietojumprogrammai ir divas pogas, uz kurām lietotāji var noklikšķināt, lai palielinātu vai samazinātu datu rekvizīta skaitītāja vērtību.
Lietotne to panāk ar @klikšķis direktīva. The @klikšķis direktīva norāda uz funkcijām īpašībā metodes, lai manipulētu ar skaitītāja vērtību.
Saistot argumentu ar klikšķa notikumu, varat pielāgot pieauguma un samazināšanas metodes, lai pievienotu vai samazinātu skaitītāja vērtību, pamatojoties uz argumentu, ko nododat metodei.
Tā kā:
<ķermeni>
<divid="lietotne">
<pogu @klikšķis="pieaugums (5)">Pievienojiet 5pogu><pogu @klikšķis="samazināt (3)">samazināt 3pogu>
<lpp>{{ skaitītājs }}lpp>
div><skripts>
const app = Vue.createApp({
dati() {
return {
teksts: "Vue ir lieliski!",
skaitītājs: 0
}
},
metodes: {
pieaugums (skaits){
this.counter = this.counter + num
},
samazināt (skaits) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
skripts>
ķermeni>
Šis koda bloks tiek paplašināts iepriekšējā Vue lietotnē, lai ļautu nodot argumentus metodēm, kas saistītas ar pogas klikšķu notikumu uztvērēju.
Metodes palielināšanai un samazināšanai Vue instancē izmanto argumentu num, lai palielinātu vai samazinātu skaitītāja rekvizītu.
Šis piemērs parāda, kā varat strādāt ar argumentiem, saistot metodes ar notikumiem pakalpojumā Vue. Metožu saistīšana ar notikumiem var palīdzēt padarīt Vue lietotnes interaktīvākas.
Vue modifikatoru novēršanas un apturēšanas izpēte
Vue notikumu modifikatori ļauj izveidot labākus notikumu klausītājus, kas atbilst jūsu lietojumprogrammas īpašajām vajadzībām. Lai izmantotu šos notikumu modifikatorus, jūs pieķēdējat modifikatorus notikumiem pakalpojumā Vue.
Piemēram:
<formā @iesniegt.novērst="handleSubmit">
<ievadeveids="teksts"v-modelis="teksts">
<poguveids="Iesniegt">Iesniegtpogu>
formā>
Iepriekš esošais koda bloks saista ķēdi novērst modifikators iesniegšanas notikumam. The novērst modifikators parasti tiek izmantots, strādājot ar veidlapām Vue.
The novērst modifikatora mērķis ir novērst veidlapas iesniegšanas noklusējuma darbību, kas ir lapas atkārtota ielāde. Izmantojot novērst, Vue var turpināt savus procesus, kamēr rokturisIesniegt metode rūpējas par veidlapas iesniegšanu.
Vēl viens ļoti noderīga modifikatora piemērs ir stop notikumu modifikators. The stop notikumu modifikators aptur notikuma izplatīšanos tālāk DOM kokā.
Parasti HTML pakārtotā elementa notikums parādās caur DOM koku, aktivizējot visus notikumu uztvērējus, kas pievienoti vecāku elementiem. Jūs varat to novērst notikumu izplatīšana Ar stop modifikatoru un neļautu notikumam aktivizēt citus notikumu klausītājus.
Lai saprastu, kā stop modifikators aptur notikumu izplatīšanos tālāk DOM kokā, apsveriet tālāk norādīto koda bloku:
<ķermeni>
<divid="lietotne">
<div @klikšķis="ārējais klikšķis"klasē="ārējais">
<div @noklikšķiniet.stop="innerClick"klasē="iekšējais">
<pogu @klikšķis="buttonClick"klasē="poga">Noklikšķiniet uz manispogu>
div>
div>
div>
<skripts>
const app = Vue.createApp({
metodes: {
outerClick() {
console.log('Ārējais klikšķis')
},
innerClick() {
console.log('Iekšējais klikšķis')
},
buttonClick() {
console.log('Pogas klikšķis')
}
}
});
app.mount("#app");
skripts>
ķermeni>
Iepriekš minētajā koda blokā ir trīs notikumu uztvērēji, kas pievienoti trim dažādiem elementiem. The pogu elements atrodas div elementa iekšpusē ar iekšējais klasē, savukārt div ar iekšējais klase atrodas div elementa iekšpusē ar ārējā klasē.
Katrs no trim elementiem klausās a klikšķis notikumu un žurnālus konsolei, noklikšķināja uz HTML elementa nosaukuma. Tālāk ir sniegts papildu klases CSS stils, lai padarītu iepriekš minēto koda bloku vieglāk saprotamu:
<galvu>
<stils>
.outer {
polsterējums: 20 pikseļi;
fona krāsa: melna;
}
.inner {
polsterējums: 20 pikseļi;
fona krāsa: pelēka;
}
poga {
polsterējums: 10 pikseļi;
fona krāsa: balta;
apmale: 2px vienkrāsains melns;
fonta izmērs: 16 pikseļi;
fonta svars: treknrakstā;
kursors: rādītājs;
}
stils>
galvu>Palaižot programmu, izveidotā Vue lietotne izskatīsies šādi:
Ņemiet vērā, ka, noklikšķinot uz pogas, programma izsauc pogaNoklikšķiniet metodi un reģistrē ziņojumu konsolei. Programma arī izsauc innerClick metodi.
Tomēr programma neizsauc ārējais klikšķis metodi, jo koda bloks pievienoja a stop modifikators uz innerClick notikumu klausītājs. Tas neļauj notikumam izplatīties tālāk DOM kokā.
Bez stop modifikatoru, programma izsauks pogaNoklikšķiniet metodi, noklikšķinot uz pogas, un notikums turpinās izplatīties pa koku, sasniedzot innerClick metode un pēc tam ārējais klikšķis metodi.
Notikumu apstrāde tīmekļa lietotnēs
Jūs esat iemācījies izmantot notikumu saistīšanu programmā Vue, lai elementiem pievienotu notikumu uztvērējus un kā izsaukt metodes, kad notiek notikumi. Jūs arī sapratāt, kā izmantot notikumu modifikatorus, lai pielāgotu notikumu uzvedību.
Lai veiktu funkcijas, tīmekļa lietotnes paļaujas uz kāda veida lietotāja notikumiem. JavaScript ir iebūvēts ar daudzām metodēm dažādu šo notikumu tveršanai un apstrādei. Šie pasākumi palīdz veidot interaktīvas lietotnes.
