Ismerje meg, hogyan teheti magasabb szintre az eseménykezelést a Vue v-on direktívájával.
A felhasználói események meghallgatása minden reszponzív webalkalmazás szerves részét képezi, és a Vue alkalmazások sem kivételek. A Vue a v-on direktíva segítségével egyszerű és hatékony módon történik az események kezelésére.
Mi az eseménykötés a Vue-ban?
Az eseménykötés egy Vue.js szolgáltatás, amely lehetővé teszi eseményfigyelő csatolását a Dokumentumobjektum modell (DOM) elem. Amikor egy esemény bekövetkezik, az eseményfigyelő műveletet vagy választ indít el a Vue alkalmazásban.
A Vue-ban eseménykötést érhet el a v-on irányelv. Ez az utasítás lehetővé teszi az alkalmazás számára, hogy figyelje a felhasználói eseményeket, például a kattintási, beviteli vagy billentyűparancsos eseményeket.
Eseményfigyelő csatolása egy elemhez a segítségével v-on, adja hozzá az esemény nevét paraméterként a direktívához:
<html>
<fej>
<forgatókönyvsrc=" https://unpkg.com/vue@3/dist/vue.global.js">forgatókönyv>
fej>
<test>
<divid="alkalmazás">
<gombv-on: kattintson="számláló++">Kattints idegomb>
<p>{{ számláló}}p>
div>
<forgatókönyv>
const app = Vue.createApp({
adat() {
Visszatérés {
szöveg: – Vue fantasztikus!,
számláló: 0
}
}
})
app.mount("#app")
forgatókönyv>
test>
html>
A fenti kódblokk példát mutat egy Vue alkalmazásra, amely meghallgatja a kattintson esemény. A kódblokk a gomb növelni a számláló értékét a Vue példány adattulajdonában eggyel.
A fenti kódblokk köti a JavaScript kifejezést számláló++ a gombhoz kattintson rendezvény a v-on irányelv. A Vue a @ karaktert gyorsírásként a helyett v-on miatti direktíva v-ongyakori használata:
<gomb @kattintson="számláló++">Kattints idegomb>
Az eseménykötés a Vue-ban nem korlátozódik a kattintási eseményekre. A Vue más eseményeket is kezel, például a billentyűleütési eseményeket, az egeret mutató eseményeket és még sok mást.
Hogy ezen események bármelyikét a v-on irányelvet, cserélje ki a kattintson esemény a kívánt esemény nevével:
<gomb @keydown.enter="számláló++">Kattints idegomb>
A fenti kód eseményfigyelőt állít be a gomb hogy hallgat a billentyűlenyomás esemény. Ha bármelyik gombot megnyomja, miközben a gomb fókuszban van, a Vue kiértékeli a számláló++ kifejezés.
A legtöbb Vue-alkalmazásban bonyolultabb logikát is kezelhet konkrét események alapján. Az események és módszerek kéz a kézben működnek az eseményen alapuló alkalmazásműveletek végrehajtásában.
A metódusok tulajdonsága in A Vue Options Object fontos funkciókat tartalmaz, amelyekre a Vue alkalmazásnak szüksége van a fokozott reakcióképességhez. A Vue metódustulajdonságával komplex logikát kezelhet eseményeken alapulóan.
Íme egy példa egy Vue alkalmazásra, amely a Metódusok tulajdonság által kezelt eseményeket jeleníti meg:
<html>
<fej>
<forgatókönyvsrc=" https://unpkg.com/vue@3/dist/vue.global.js">forgatókönyv>
fej>
<test>
<divid="alkalmazás">
<gomb @kattintson="növekedés">Add hozzá 1gomb>
<gomb @kattintson="csökkenteni">csökkenteni 1gomb>
<p>{{ számláló }}p>
div>
<forgatókönyv>
const app = Vue.createApp({
adat() {
Visszatérés {
szöveg: 'Vue fantasztikus!',
számláló: 0
}
},
módszerek: {
növekedés(){
this.counter = this.counter + 1
},
csökkenti() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
forgatókönyv>
test>
html>
A fenti Vue alkalmazás bemutatja, hogyan kapcsolhatja össze az eseményeket a metódusokkal. Az alkalmazás két gombbal rendelkezik, amelyekre kattintva a felhasználók növelhetik vagy csökkenthetik a számláló értékét az adattulajdonságban.
Az alkalmazás ezt a @kattintás irányelv. A @kattintás direktíva a Metódusok tulajdonságban lévő függvényekre mutat a számlálóérték manipulálására.
Amikor argumentumot csatol a kattintási eseményhez, testreszabhatja a növelési és csökkentési módszereket, hogy hozzáadja vagy csökkentse a számlálóértéket a metódusnak átadott argumentum alapján.
Például így:
<test>
<divid="alkalmazás">
<gomb @kattintson="növekmény (5)">Adjunk hozzá 5-ötgomb><gomb @kattintson="csökkentés (3)">csökkenteni 3gomb>
<p>{{ számláló }}p>
div><forgatókönyv>
const app = Vue.createApp({
adat() {
Visszatérés {
szöveg: 'Vue fantasztikus!',
számláló: 0
}
},
módszerek: {
növekmény (szám){
this.counter = this.counter + szm
},
csökkenteni (szám) {
this.counter = this.counter - szm
}
}
})
app.mount('#app')
forgatókönyv>
test>
Ez a kódblokk kiterjed az előző Vue alkalmazásra, hogy lehetővé tegye az argumentumok átadását a gomb kattintási eseményfigyelőjéhez kapcsolódó metódusoknak.
A Vue-példány növekményes és csökkentési módszerei egy num argumentumot vesznek igénybe a számláló tulajdonság növeléséhez vagy csökkentéséhez.
Ez a példa bemutatja, hogyan dolgozhat argumentumokkal, amikor metódusokat kapcsol össze a Vue eseményeivel. A módszerek és események összekapcsolása segíthet a Vue-alkalmazások interaktívabbá tételében.
A Vue megelőzési és leállítási módosítóinak felfedezése
A Vue eseménymódosítói lehetővé teszik, hogy jobb eseményfigyelőket hozzon létre, amelyek megfelelnek az alkalmazás speciális igényeinek. Ezen eseménymódosítók használatához láncolja a módosítókat a Vue eseményeihez.
Például:
<forma @benyújtani.megakadályozni="handleSubmit">
<bemenettípus="szöveg"v-modell="szöveg">
<gombtípus="Beküldés">Beküldésgomb>
forma>
A fenti kódblokk láncolja a megakadályozni módosító a beküldési eseményhez. A megakadályozni módosítót gyakran használják a Vue űrlapjaival való munka során.
A megakadályozni A módosító célja, hogy megakadályozza az űrlap elküldésének alapértelmezett viselkedését, azaz az oldal újratöltését. Használata megakadályozni, A Vue folytathatja folyamatait, miközben a handleSubmit metódus gondoskodik az űrlap benyújtásáról.
Egy másik példa egy nagyon hasznos módosítóra a állj meg eseménymódosító. A állj meg eseménymódosító leállítja az esemény továbbterjedését a DOM-fában.
Általában egy HTML utódelem eseménye buborékolódik át a DOM-fán, aktiválva a szülőelemekhez csatolt eseményfigyelőket. Ezt meg tudod akadályozni esemény terjesztése a... val állj meg módosító, és megakadályozza, hogy az esemény további eseményfigyelőket indítson el.
Hogy megértsük, hogyan a állj meg módosító leállítja az események továbbterjedését egy DOM-fában, tekintse meg az alábbi kódblokkot:
<test>
<divid="alkalmazás">
<div @kattintson="outerClick"osztály="külső">
<div @kattintson.stop="innerClick"osztály="belső">
<gomb @kattintson="buttonClick"osztály="gomb">Kattints idegomb>
div>
div>
div>
<forgatókönyv>
const app = Vue.createApp({
módszerek: {
outerClick() {
console.log('Külső kattintás')
},
innerClick() {
console.log('Belső kattintás')
},
buttonClick() {
console.log('Button Click')
}
}
});
app.mount("#app");
forgatókönyv>
test>
A fenti kódblokk három eseményfigyelőt tartalmaz három különböző elemhez. A gomb elem a div belsejében található a belső osztály, míg a div a belső osztály a div-en belül van a külső osztály.
Mindhárom elem figyeli a kattintson esemény és naplók a konzolba, a HTML elem nevére kattintott. Az alábbiakban további CSS-stílusok találhatók, amelyek megkönnyítik a fenti kódblokk megértését:
<fej>
<stílus>
.outer {
padding: 20px;
háttérszín: fekete;
}
.inner {
padding: 20px;
háttérszín: szürke;
}
gomb {
padding: 10px;
háttérszín: fehér;
keret: 2px tömör fekete;
betűméret: 16 képpont;
betűsúly: félkövér;
kurzor: pointer;
}
stílus>
fej>A program futtatásakor a létrehozott Vue alkalmazás így fog kinézni:
Vegye figyelembe, hogy a gombra kattintva a program meghívja a gombraKattintson módszert, és naplóz egy üzenetet a konzolra. A program felhívja a belső kattintás módszer.
A program azonban nem hívja meg a külső kattintás módszer, mert a kódblokk hozzáadta a állj meg módosító a belső kattintás eseményhallgató. Ez megakadályozza, hogy az esemény továbbterjedjen a DOM-fában.
Anélkül, hogy a állj meg módosító, a program meghívja a gombraKattintson módszerrel, amikor rákattint a gombra, és az esemény tovább terjed a fán, elérve a belső kattintás módszert, majd a külső kattintás módszer.
Események kezelése webes alkalmazásokban
Megtanulta, hogyan lehet esemény-összerendelést használni a Vue-ban eseményfigyelők elemekhez csatolására, és hogyan lehet metódusokat meghívni események bekövetkeztekor. Azt is megértette, hogyan lehet eseménymódosítókat használni az események viselkedésének testreszabására.
A webalkalmazások bizonyos formájú felhasználói eseményekre támaszkodnak a funkciók végrehajtásához. A JavaScript számos beépített módszerrel rendelkezik ezen események rögzítésére és kezelésére. Ezek az események segítenek interaktív alkalmazások létrehozásában.
