Naučte sa, ako zvýšiť úroveň spracovania vašich udalostí pomocou smernice Vue v-on.
Počúvanie udalostí používateľov je neoddeliteľnou súčasťou každej responzívnej webovej aplikácie a aplikácie Vue nie sú výnimkou. Vue prichádza s jednoduchým a efektívnym spôsobom spracovania udalostí pomocou smernice v-on.
Čo je to viazanie udalostí vo Vue?
Väzba udalosti je funkcia Vue.js, ktorá vám umožňuje pripojiť prijímač udalostí k a Model objektu dokumentu (DOM) element. Keď nastane udalosť, poslucháč udalosti spustí akciu alebo odpoveď vo vašej aplikácii Vue.
Môžete dosiahnuť viazanie udalostí vo Vue pomocou v-on smernice. Táto direktíva umožňuje vašej aplikácii načúvať udalostiam používateľov, ako sú udalosti kliknutia, vstupu alebo stlačenia klávesov.
Ak chcete pripojiť poslucháč udalosti k prvku pomocou v-on, pridajte názov udalosti ako parameter do smernice:
<html>
<hlavu>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlavu>
<telo>
<divid="aplikácia">
<tlačidlov-on: kliknutie="counter++">Klikni na mňatlačidlo>
<p>{{ counter}}p>
div>
<skript>
konšt app = Vue.createApp({
data() {
vrátiť {
text: 'Vue je úžasná!',
počítadlo: 0
}
}
})
app.mount('#app')
skript>
telo>
html>
Vyššie uvedený blok kódu zobrazuje príklad aplikácie Vue, ktorá počúva a kliknite udalosť. Blok kódu používa a tlačidlo zvýšiť počítadlo hodnotu vo vlastnosti údajov inštancie Vue o jednu.
Vyššie uvedený blok kódu viaže výraz JavaScript counter++ na tlačidlo kliknite udalosť s v-on smernice. Vue používa @ znak ako skratka namiesto znaku v-on smernice z dôvodu v-ončasté používanie:
<tlačidlo @kliknite="counter++">Klikni na mňatlačidlo>
Väzba udalosti vo Vue nie je obmedzená na udalosti kliknutia. Vue spracováva ďalšie udalosti, ako sú udalosti stlačenia klávesov, udalosti po prejdení myšou a ďalšie.
Ak chcete spojiť ktorúkoľvek z týchto udalostí s v-on smernicu, nahradiť kliknite udalosť s názvom požadovanej udalosti:
<tlačidlo @keydown.enter="counter++">Klikni na mňatlačidlo>
Vyššie uvedený kód nastavuje prijímač udalostí na tlačidlo ktorý počúva na keydown udalosť. Keď sa stlačí ľubovoľná klávesa, keď je tlačidlo zaostrené, Vue vyhodnotí counter++ výraz.
Vo väčšine aplikácií Vue môžete zvládnuť zložitejšiu logiku založenú na konkrétnych udalostiach. Udalosti a metódy fungujú ruka v ruke pri vykonávaní akcií aplikácie na základe udalosti.
Vlastnosť metód v Objekt možností Vue obsahuje dôležité funkcie, ktoré vaša aplikácia Vue potrebuje na zvýšenie reaktivity. S vlastnosťou Methods vo Vue môžete zvládnuť komplexnú logiku založenú na udalostiach.
Tu je príklad aplikácie Vue, ktorá zobrazuje udalosti spracované vlastnosťou Methods:
<html>
<hlavu>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlavu>
<telo>
<divid="aplikácia">
<tlačidlo @kliknite="prírastok">Pridajte 1tlačidlo>
<tlačidlo @kliknite="znížiť">znížiť 1tlačidlo>
<p>{{ počítadlo }}p>
div>
<skript>
const app = Vue.createApp({
data() {
vrátiť {
text: 'Vue je úžasné!',
počítadlo: 0
}
},
metódy: {
increment(){
toto.počítadlo = toto.počítadlo + 1
},
znížiť() {
toto.počítadlo = toto.počítadlo - 1
}
}
})
app.mount('#app')
skript>
telo>
html>
Aplikácia Vue vyššie zobrazuje, ako prepojiť udalosti s metódami. Aplikácia má dve tlačidlá, na ktoré môžu používatelia kliknúť, aby zvýšili alebo znížili hodnotu počítadla vo vlastnosti údajov.
Aplikácia to dosiahne pomocou @klikni smernice. The @klikni Direktíva ukazuje na funkcie vo vlastnosti metód na manipuláciu s hodnotou počítadla.
Pri pripájaní argumentu k udalosti kliknutia môžete prispôsobiť metódy zvýšenia a zníženia na pridanie alebo zníženie hodnoty počítadla na základe argumentu, ktorý odošlete metóde.
Ako:
<telo>
<divid="aplikácia">
<tlačidlo @kliknite="prírastok (5)">Pridajte 5tlačidlo><tlačidlo @kliknite="znížiť (3)">znížiť 3tlačidlo>
<p>{{ počítadlo }}p>
div><skript>
const app = Vue.createApp({
data() {
vrátiť {
text: 'Vue je úžasné!',
počítadlo: 0
}
},
metódy: {
prírastok (num){
toto.počítadlo = toto.počítadlo + č
},
znížiť (num) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
skript>
telo>
Tento blok kódu sa rozširuje na predchádzajúcu aplikáciu Vue a umožňuje odovzdávanie argumentov metódam spojeným s prijímačom udalosti kliknutia na tlačidle.
Metódy zvyšujú a znižujú v inštancii Vue argument num na zvýšenie alebo zníženie vlastnosti počítadla.
Tento príklad ukazuje, ako môžete pracovať s argumentmi pri prepájaní metód s udalosťami vo Vue. Prepojenie metód s udalosťami môže pomôcť pri vytváraní interaktívnejších aplikácií Vue.
Preskúmanie modifikátorov Zabrániť a zastaviť vo Vue
Modifikátory udalostí vo Vue vám umožňujú vytvárať lepšie prijímače udalostí, ktoré vyhovujú špecifickým potrebám vašej aplikácie. Ak chcete využiť tieto modifikátory udalostí, priraďte modifikátory k udalostiam vo Vue.
Napríklad:
<formulár @predložiť.zabrániť="handleSubmit">
<vstuptypu="text"v-model="text">
<tlačidlotypu="Predložiť">Predložiťtlačidlo>
formulár>
Blok kódu nad reťazcom zabrániť modifikátor udalosti odoslať. The zabrániť modifikátor sa bežne používa pri práci s formulármi vo Vue.
The zabrániť Účelom modifikátora je zabrániť predvolenému správaniu pri odosielaní formulára, ktorým je opätovné načítanie stránky. Použitím zabrániť, Vue môže pokračovať vo svojich procesoch, kým rukoväťOdoslať metóda sa postará o odoslanie formulára.
Ďalším príkladom veľmi užitočného modifikátora je zastaviť modifikátor udalosti. The zastaviť modifikátor udalosti zastaví šírenie udalosti ďalej v strome DOM.
Udalosť podriadeného prvku HTML zvyčajne prebubláva cez strom DOM a aktivuje všetky prijímače udalostí pripojené k nadradeným prvkom. Môžete tomu zabrániť propagácia udalosti s zastaviť modifikátor a zabrániť tomu, aby udalosť spustila ďalšie poslucháče udalostí.
Aby ste pochopili, ako zastaviť modifikátor zastaví šírenie udalostí vyššie v strome DOM, zvážte blok kódu nižšie:
<telo>
<divid="aplikácia">
<div @kliknite="vonkajšie kliknutie"trieda="vonkajšie">
<div @klik.zastav="innerClick"trieda="vnútorný">
<tlačidlo @kliknite="buttonClick"trieda="tlačidlo">Klikni na mňatlačidlo>
div>
div>
div>
<skript>
const app = Vue.createApp({
metódy: {
externalClick() {
console.log('Vonkajšie kliknutie')
},
innerClick() {
console.log('Vnútorné kliknutie')
},
buttonClick() {
console.log('Kliknutie na tlačidlo')
}
}
});
app.mount("#app");
skript>
telo>
Vyššie uvedený blok kódu má tri prijímače udalostí pripojené k trom rôznym prvkom. The tlačidlo prvok je vo vnútri prvku div s vnútorné triedy, zatiaľ čo div s vnútorné trieda je vo vnútri div s vonkajšie trieda.
Každý z troch prvkov počúva a kliknite udalosť a protokoly do konzoly, klikol na názov prvku HTML. Nižšie je uvedený dodatočný štýl CSS triedy, aby bol vyššie uvedený blok kódu zrozumiteľnejší:
<hlavu>
<štýl>
.vonkajšie {
výplň: 20px;
farba pozadia: čierna;
}
.vnútorné {
výplň: 20px;
farba pozadia: šedá;
}
tlačidlo {
výplň: 10px;
farba pozadia: biela;
orámovanie: 2px plná čierna;
veľkosť písma: 16px;
font-weight: bold;
kurzor: ukazovateľ;
}
štýl>
hlavu>Pri spustení programu bude vytvorená aplikácia Vue vyzerať takto:
Všimnite si, že keď kliknete na tlačidlo, program zavolá tlačidloKliknutie a zaprotokoluje správu do konzoly. Program tiež volá innerClick metóda.
Program však nevolá externalClick metóda, pretože blok kódu pridal a zastaviť modifikátor na innerClick poslucháč udalostí. Toto zastaví šírenie udalosti ďalej v strome DOM.
Bez zastaviť modifikátor, program zavolá tlačidloKliknutie po kliknutí na tlačidlo a udalosť sa bude ďalej šíriť po strome a dosiahne innerClick metóda a potom externalClick metóda.
Spracovanie udalostí vo webových aplikáciách
Naučili ste sa, ako používať väzbu udalostí vo Vue na pripojenie poslucháčov udalostí k prvkom a ako volať metódy, keď nastanú udalosti. Tiež ste pochopili, ako používať modifikátory udalostí na prispôsobenie správania udalostí.
Webové aplikácie sa pri vykonávaní funkcií spoliehajú na určitú formu používateľských udalostí. JavaScript je vybavený množstvom metód na zachytenie a spracovanie rôznych týchto udalostí. Tieto udalosti pomáhajú pri vytváraní interaktívnych aplikácií.
