Naučite se izboljšati obravnavo dogodkov z Vuejevo direktivo v-on.

Poslušanje uporabniških dogodkov je sestavni del vsake odzivne spletne aplikacije in aplikacije Vue niso izjema. Vue je zgrajen s preprostim in učinkovitim načinom za obravnavo dogodkov s svojo direktivo v-on.

Kaj je vezava dogodkov v Vue?

Vezava dogodkov je funkcija Vue.js, ki vam omogoča pripenjanje poslušalca dogodkov na a Objektni model dokumenta (DOM) element. Ko pride do dogodka, poslušalec dogodkov sproži dejanje ali odgovor v vaši aplikaciji Vue.

Vezavo dogodkov v Vue lahko dosežete z v-on direktiva. Ta direktiva vaši aplikaciji omogoča poslušanje uporabniških dogodkov, kot so dogodki klikanja, vnosa ali dviga ključa.

Če želite pripeti poslušalca dogodkov elementu z uporabo v-on, dodajte ime dogodka kot parameter v direktivo:

<html>
<glavo>
<scenarijsrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarij>
glavo>
<telo>
<divid="aplikacija">
<gumbv-on: klik="števec++">Kliknite megumb>
<str>{{ števec}}str>
div>
<scenarij>
konst app = Vue.createApp({
 podatki() {
vrnitev {
 besedilo: 'Vue je super!',
 števec: 0
 }
 }
 })
 app.mount('#aplikacija')
scenarij>
telo>
html>

Zgornji blok kode prikazuje primer aplikacije Vue, ki posluša a kliknite dogodek. Kodni blok uporablja a gumb za povečanje števec vrednost v podatkovni lastnosti primerka Vue za eno.

Zgornji blok kode veže izraz JavaScript števec++ na gumbe kliknite dogodek z v-on direktiva. Vue uporablja @ znak kot okrajšava namesto v-on direktiva zaradi v-onpogosta uporaba:

<gumb @kliknite="števec++">Kliknite megumb>

Vezava dogodkov v Vue ni omejena na dogodke klikov. Vue obravnava druge dogodke, kot so dogodki pritiskanja tipk, dogodki premikanja miške in drugo.

Če želite katerega koli od teh dogodkov povezati z v-on direktivo, nadomestiti kliknite dogodek z imenom želenega dogodka:

<gumb @keydown.enter="števec++">Kliknite megumb>

Zgornja koda nastavi poslušalca dogodkov na gumb ki posluša za keydown dogodek. Ko pritisnete katero koli tipko, medtem ko je gumb v fokusu, Vue oceni števec++ izražanje.

V večini aplikacij Vue lahko upravljate z bolj zapleteno logiko, ki temelji na določenih dogodkih. Dogodki in metode delujejo z roko v roki za izvajanje dejanj aplikacije na podlagi dogodka.

Lastnost metode v Predmet možnosti Vue vsebuje pomembne funkcije, ki jih vaša aplikacija Vue potrebuje za izboljšano odzivnost. Z lastnostjo metode v Vue lahko upravljate s kompleksno logiko, ki temelji na dogodkih.

Tukaj je primer aplikacije Vue, ki prikazuje dogodke, ki jih obravnava lastnost metode:

<html>
<glavo>
<scenarijsrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarij>
glavo>
<telo>
<divid="aplikacija">
<gumb @kliknite="prirast">Dodaj 1gumb>
<gumb @kliknite="zmanjšati">zmanjšati 1gumb>
<str>{{ števec }}str>
div>
<scenarij>
 const app = Vue.createApp({
 podatki() {
 return {
 besedilo: 'Vue je super!',
 števec: 0
 }
 },
 metode: {
 prirast(){
 ta.števec = ta.števec + 1
 },
 zmanjšaj() {
 ta.števec = ta.števec - 1
 }
 }
 })
 app.mount('#app')
scenarij>
telo>
html>

Zgornja aplikacija Vue prikazuje, kako povezati dogodke z metodami. Aplikacija ima dva gumba, ki ju lahko uporabniki kliknejo, da povečajo ali zmanjšajo vrednost števca v lastnosti podatkov.

Aplikacija to doseže z @klik direktiva. The @klik direktiva kaže na funkcije v lastnosti metode za manipulacijo vrednosti števca.

Pri povezovanju argumenta z dogodkom klika lahko prilagodite metode prirastka in zmanjšanja, da dodate ali zmanjšate vrednost števca na podlagi argumenta, ki ga posredujete metodi.

takole:

<telo>
<divid="aplikacija">
<gumb @kliknite="prirast (5)">Dodajte 5gumb>
<gumb @kliknite="zmanjšaj (3)">zmanjšati 3gumb>
<str>{{ števec }}str>
div>


<scenarij>
 const app = Vue.createApp({
 podatki() {
 return {
 besedilo: 'Vue je super!',
 števec: 0
 }
 },
 metode: {
 prirastek (št){
 ta.števec = ta.števec + št
 },
 zmanjšaj (število) {
 ta.števec = ta.števec - št
 }
 }
 })
 app.mount('#app')
scenarij>
telo>

Ta blok kode se razširi na prejšnjo aplikacijo Vue, da omogoči posredovanje argumentov metodam, povezanim s poslušalcem dogodka klika na gumbu.

Metodi povečanja in zmanjšanja v primerku Vue sprejmeta argument num za povečanje ali zmanjšanje lastnosti števca.

Ta primer prikazuje, kako lahko delate z argumenti pri povezovanju metod z dogodki v Vue. Povezovanje metod z dogodki lahko pomaga narediti aplikacije Vue bolj interaktivne.

Raziskovanje modifikatorjev Prevent in Stop v Vue

Modifikatorji dogodkov v Vue vam omogočajo ustvarjanje boljših poslušalcev dogodkov, ki ustrezajo posebnim potrebam vaše aplikacije. Če želite uporabiti te modifikatorje dogodkov, jih verižite z dogodki v Vue.

Na primer:

<oblika @predložiti.preprečiti="handleSubmit">
<vnosvrsta="besedilo"v-model="besedilo">
<gumbvrsta="oddaj">Predložigumb>
oblika>

Zgornji blok kode veriži preprečiti modifikator dogodka predložitve. The preprečiti modifikator se običajno uporablja pri delu z obrazci v Vue.

The preprečiti Namen modifikatorja je preprečiti privzeto vedenje oddaje obrazca, ki je ponovno nalaganje strani. Uporaba preprečiti, lahko Vue nadaljuje svoje procese, medtem ko je handleSubmit metoda poskrbi za oddajo obrazca.

Drug primer zelo uporabnega modifikatorja je stop modifikator dogodka. The stop modifikator dogodka ustavi širjenje dogodka naprej po drevesu DOM.

Običajno se dogodek podrejenega elementa HTML pojavi v mehurčkih skozi drevo DOM in aktivira vse poslušalce dogodkov, pritrjene nadrejenim elementom. To lahko preprečite širjenje dogodkov z stop modifikator in preprečite, da bi dogodek sprožil nadaljnje poslušalce dogodkov.

Da bi razumeli, kako stop modifikator ustavi širjenje dogodkov naprej po drevesu DOM, upoštevajte spodnji blok kode:

<telo>
<divid="aplikacija">
<div @kliknite="outerClick"razred="zunanji">
<div @klik.stop="notranji klik"razred="notranji">
<gumb @kliknite="klik na gumb"razred="gumb">Kliknite megumb>
div>
div>
div>
<scenarij>
 const app = Vue.createApp({
 metode: {
 outerClick() {
 console.log('Zunanji klik')
 },
 innerClick() {
 console.log('Notranji klik')
 },
 buttonClick() {
 console.log('Klik gumba')
 }
 }
 });
 app.mount("#app");
scenarij>
telo>

Zgornji blok kode ima tri poslušalce dogodkov, pritrjene na tri različne elemente. The gumb element je znotraj diva z notranji razreda, medtem ko je div z notranji razred je znotraj diva z zunanji razred.

Vsak od treh elementov posluša a kliknite dogodka in dnevnikov v konzolo, kliknili ime elementa HTML. Spodaj je dodatni slog CSS razreda, ki omogoča lažje razumevanje zgornjega bloka kode:

<glavo>
<stil>
 .outer {
 oblazinjenje: 20px;
 barva ozadja: črna;
 }
 .notranji {
 oblazinjenje: 20px;
 barva ozadja: siva;
 }
 gumb {
 oblazinjenje: 10px;
 barva ozadja: bela;
 obroba: 2px polna črna;
 velikost pisave: 16px;
 teža pisave: krepko;
 kazalec: kazalec;
 }
stil>
glavo>

Ko zaženete program, bo ustvarjena aplikacija Vue videti takole:

Upoštevajte, da ko kliknete gumb, program pokliče gumb Kliknite in zapiše sporočilo v konzolo. Program pokliče tudi innerClick metoda.

Vendar pa program ne pokliče outerClick ker je blok kode dodal a stop modifikator za innerClick poslušalec dogodkov. To prepreči nadaljnje širjenje dogodka po drevesu DOM.

Brez stop modifikator, bo program poklical gumb Kliknite metodo, ko kliknete gumb, dogodek pa se bo še naprej širil po drevesu in dosegel innerClick metoda in nato outerClick metoda.

Upravljanje dogodkov v spletnih aplikacijah

Naučili ste se, kako uporabljati vezavo dogodkov v Vue za pripenjanje poslušalcev dogodkov na elemente in kako poklicati metode, ko pride do dogodkov. Prav tako ste razumeli, kako uporabljati modifikatorje dogodkov za prilagoditev obnašanja dogodkov.

Spletne aplikacije se za izvajanje funkcij zanašajo na neko obliko uporabniških dogodkov. JavaScript ima vgrajeno veliko metod za zajemanje in obravnavo različnih teh dogodkov. Ti dogodki pomagajo pri ustvarjanju interaktivnih aplikacij.