Lær, hvordan du forbedrer din begivenhedshåndtering med Vues v-on-direktiv.
At lytte til brugerbegivenheder er en integreret del af enhver responsiv webapp, og Vue-apps er ingen undtagelse. Vue er bygget med en enkel og effektiv måde at håndtere begivenheder på med sit v-on-direktiv.
Hvad er begivenhedsbinding i Vue?
Hændelsesbinding er en Vue.js-funktion, der giver dig mulighed for at knytte en begivenhedslytter til en Document Object Model (DOM) element. Når en hændelse opstår, udløser hændelseslytteren en handling eller et svar i din Vue-app.
Du kan opnå begivenhedsbinding i Vue med v-på direktiv. Dette direktiv giver din app mulighed for at lytte efter brugerbegivenheder såsom klik-, enter- eller taste-hændelser.
At knytte en begivenhedslytter til et element ved hjælp af v-på, tilføj hændelsesnavnet som en parameter til direktivet:
<html>
<hoved>
<manuskriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">manuskript>
hoved>
<legeme>
<divid="app">
<knapv-on: klik="tæller++">Klik på migknap>
<s>{{ counter}}s>
div>
<manuskript>
konst app = Vue.createApp({
data() {
Vend tilbage {
tekst: 'Vue er fantastisk!',
tæller: 0
}
}
})
app.mount('#app')
manuskript>
legeme>
html>
Kodeblokken ovenfor viser et eksempel på en Vue-app, der lytter til en klik begivenhed. Kodeblokken bruger en knap at øge tæller værdi i dataegenskaben for Vue-forekomsten med én.
Ovenstående kodeblok binder JavaScript-udtrykket tæller++ til knappens klik arrangement med v-på direktiv. Vue bruger @ karakter som en stenografi i stedet for v-på direktiv pga v-pås hyppige brug:
<knap @klik="tæller++">Klik på migknap>
Begivenhedsbinding i Vue er ikke begrænset til klikbegivenheder. Vue håndterer andre begivenheder, såsom tastetryk begivenheder, mouseover begivenheder og mere.
For at binde nogen af disse begivenheder til v-på direktiv, udskift klik begivenhed med navnet på den ønskede begivenhed:
<knap @keydown.enter="tæller++">Klik på migknap>
Koden ovenfor opretter en begivenhedslytter på knap der lytter efter tasten ned begivenhed. Når en tast trykkes ned, mens knappen har fokus, evaluerer Vue tæller++ udtryk.
I de fleste Vue-apps kan du håndtere mere kompleks logik baseret på specifikke hændelser, der opstår. Hændelser og metoder arbejder hånd i hånd for at udføre apphandlinger baseret på en hændelse.
Metoderne egner sig i Vues Options Object rummer vigtige funktioner, som din Vue-app har brug for for øget reaktivitet. Med methods-egenskaben i Vue kan du håndtere kompleks logik baseret på hændelser.
Her er et eksempel på en Vue-app, der viser hændelser, der håndteres af methods-egenskaben:
<html>
<hoved>
<manuskriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">manuskript>
hoved>
<legeme>
<divid="app">
<knap @klik="stigning">Tilføj 1knap>
<knap @klik="reducere">reducere 1knap>
<s>{{ tæller }}s>
div>
<manuskript>
const app = Vue.createApp({
data() {
Vend tilbage {
tekst: 'Vue er fantastisk!',
tæller: 0
}
},
metoder: {
increment(){
denne.tæller = denne.tæller + 1
},
reducere() {
denne.tæller = denne.tæller - 1
}
}
})
app.mount('#app')
manuskript>
legeme>
html>
Vue-appen ovenfor viser, hvordan man forbinder begivenheder med metoder. Appen har to knapper, som brugere kan klikke på for at øge eller reducere tællerværdien i dataegenskaben.
Appen opnår dette med @klik direktiv. Det @klik direktiv peger på funktionerne i methods-egenskaben for at manipulere tællerværdien.
Når du linker et argument til klikhændelsen, kan du tilpasse stigningen og reducere metoderne for at tilføje eller reducere tællerværdien baseret på det argument, du sender til metoden.
Ligesom:
<legeme>
<divid="app">
<knap @klik="stigning (5)">Tilføj 5knap><knap @klik="reducer (3)">reducere 3knap>
<s>{{ tæller }}s>
div><manuskript>
const app = Vue.createApp({
data() {
Vend tilbage {
tekst: 'Vue er fantastisk!',
tæller: 0
}
},
metoder: {
stigning (antal){
denne.tæller = denne.tæller + antal
},
reducere (antal) {
denne.tæller = denne.tæller - antal
}
}
})
app.mount('#app')
manuskript>
legeme>
Denne kodeblok udvider den tidligere Vue-app for at tillade videregivelse af argumenter til de metoder, der er knyttet til klikhændelseslytteren på knappen.
Metoderne øger og reducerer i Vue-forekomsten tager et argument num for at øge eller reducere tælleregenskaben.
Dette eksempel viser, hvordan du kan arbejde med argumenter, når du forbinder metoder med hændelser i Vue. Sammenkædningsmetoder med begivenheder kan hjælpe med at gøre Vue-apps mere interaktive.
Udforsk forebyggelses- og stopmodifikatorerne i Vue
Hændelsesmodifikatorer i Vue giver dig mulighed for at skabe bedre begivenhedslyttere, der imødekommer de specifikke behov i din applikation. For at bruge disse hændelsesmodifikatorer kæder du modifikatorerne til begivenheder i Vue.
For eksempel:
<form @indsende.forhindre="handleSubmit">
<inputtype="tekst"v-model="tekst">
<knaptype="Indsend">Indsendknap>
form>
Kodeblokken ovenfor kæder forhindre modifikator til indsendelseshændelsen. Det forhindre modifier bruges ofte, når du arbejder med formularer i Vue.
Det forhindre modifikatorens formål er at forhindre standardadfærden ved formularindsendelse, som er at genindlæse siden. Ved brug af forhindre, kan Vue fortsætte sine processer, mens den handleSend metode tager sig af formularindsendelsen.
Et andet eksempel på en meget nyttig modifikator er hold op hændelsesmodifikator. Det hold op hændelsesmodifikator forhindrer en hændelse i at forplante sig længere op i DOM-træet.
Normalt bobler et HTML-underelements hændelse op gennem DOM-træet og aktiverer eventuelle hændelseslyttere, der er knyttet til overordnede elementer. Du kan forhindre dette hændelsesudbredelse med hold op modifikator og forhindre begivenheden i at udløse flere begivenhedslyttere.
For at forstå, hvordan hold op modifikator stopper udbredelsen af hændelser længere oppe i et DOM-træ, overvej kodeblokken nedenfor:
<legeme>
<divid="app">
<div @klik="outerClick"klasse="ydre">
<div @klik.stop="innerClick"klasse="indre">
<knap @klik="knapKlik"klasse="knap">Klik på migknap>
div>
div>
div>
<manuskript>
const app = Vue.createApp({
metoder: {
outerClick() {
console.log('Ydre klik')
},
innerClick() {
console.log('Indre klik')
},
knapKlik() {
console.log('Knap klik')
}
}
});
app.mount("#app");
manuskript>
legeme>
Kodeblokken ovenfor har tre hændelseslyttere knyttet til tre forskellige elementer. Det knap element er inde i div med indre klasse, mens div med indre klasse er inde i div med ydre klasse.
Hvert af de tre elementer lytter efter en klik hændelse og logfiler til konsollen, klikkede på navnet på HTML-elementet. Nedenfor er yderligere klasse CSS-styling for at gøre ovenstående kodeblok lettere at forstå:
<hoved>
<stil>
.outer {
polstring: 20px;
baggrundsfarve: sort;
}
.inner {
polstring: 20px;
baggrundsfarve: grå;
}
knap {
polstring: 10px;
baggrundsfarve: hvid;
kant: 2px ensfarvet sort;
skriftstørrelse: 16px;
font-weight: fed;
markør: pointer;
}
stil>
hoved>Når du kører programmet, vil den oprettede Vue-app se sådan ud:
Bemærk, at når du klikker på knappen, kalder programmet den knapKlik metode og logger en besked til konsollen. Programmet kalder også indreKlik metode.
Programmet kalder dog ikke ydreKlik metode, fordi kodeblokken tilføjede en hold op modifikator til indreKlik begivenheds lytter. Dette forhindrer hændelsen i at forplante sig længere oppe i DOM-træet.
Uden hold op modifikator, vil programmet kalde knapKlik metode, når du klikker på knappen, og hændelsen fortsætter med at forplante sig op i træet og nå indreKlik metode og derefter ydreKlik metode.
Håndtering af hændelser i webapps
Du har lært, hvordan du bruger hændelsesbinding i Vue til at knytte hændelseslyttere til elementer, og hvordan du kalder metoder, når hændelser opstår. Du har også forstået, hvordan du bruger hændelsesmodifikatorer til at tilpasse hændelsesadfærd.
Webapps er afhængige af en form for brugerhændelser til at udføre funktioner. JavaScript kommer indbygget med en masse metoder til at fange og håndtere en række af disse begivenheder. Disse begivenheder hjælper med at bygge interaktive apps.