Home-theater-designers
Att lyssna på användarhändelser är en integrerad del av alla responsiva webbappar, och Vue-appar är inget undantag. Vue är byggt med ett enkelt och effektivt sätt att hantera händelser med sitt v-on-direktiv.
Vad är händelsebindande i Vue?
Händelsebindning är en Vue.js-funktion som låter dig koppla en händelseavlyssnare till en Document Object Model (DOM) element. När en händelse inträffar utlöser händelseavlyssnaren en åtgärd eller ett svar i din Vue-app.
MAKEUSE AV DAGENS VIDEO SCROLL FÖR ATT FORTSÄTTA MED INNEHÅLL
Du kan uppnå evenemangsbindning i Vue med v-på direktiv. Detta direktiv låter din app lyssna efter användarhändelser som klick-, enter- eller knapphändelser.
Att koppla en händelseavlyssnare till ett element med hjälp av v-på , lägg till händelsenamnet som en parameter i direktivet:
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter++">Click me</button>
<p>{{ counter}}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
}
})
app.mount('#app')
</script>
</body>
</html>
Kodblocket ovan visar ett exempel på en Vue-app som lyssnar på en klick händelse. Kodblocket använder en knapp att öka disken värde i dataegenskapen för Vue-instansen med ett.
Ovanstående kodblock binder JavaScript-uttrycket räknare++ till knappens klick händelse med v-på direktiv. Vue använder @ karaktär som en stenografi i stället för v-på direktiv pga v-på s frekventa användning:
<button @click="counter++">Click me</button>
Händelsebindning i Vue är inte begränsad till klickhändelser. Vue hanterar andra händelser, som knapptryckningshändelser, mouseover-händelser och mer.
För att binda någon av dessa händelser till v-på direktiv, ersätt klick händelse med namnet på önskad händelse:
<button @keydown.enter="counter++">Click me</button>
Koden ovan ställer in en händelseavlyssnare på knapp som lyssnar efter nyckel ner händelse. När någon tangent trycks ned medan knappen har fokus, utvärderar Vue räknare++ uttryck.
Länka händelser med metoder i Vue
I de flesta Vue-appar kan du hantera mer komplex logik baserat på specifika händelser som inträffar. Händelser och metoder arbetar hand i hand för att utföra appåtgärder baserat på en händelse.
Metoderna finns i Vues alternativobjekt har viktiga funktioner som din Vue-app behöver för ökad reaktivitet. Med methods-egenskapen i Vue kan du hantera komplex logik baserad på händelser.
Här är ett exempel på en Vue-app som visar händelser som hanteras av methods-egenskapen:
hur man gör en startbar diskett
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="increment">Add 1</button>
<button @click="reduce">reduce 1</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(){
this.counter = this.counter + 1
},
reduce() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
</script>
</body>
</html>
Vue-appen ovan visar hur man länkar händelser med metoder. Appen har två knappar som användare kan klicka på för att öka eller minska räknarvärdet i dataegenskapen.
Appen uppnår detta med @klick direktiv. De @klick direktiv pekar på funktionerna i methods-egenskapen för att manipulera räknarvärdet.
När du länkar ett argument till klickhändelsen kan du anpassa inkrementet och reducera metoderna för att lägga till eller minska räknarvärdet baserat på argumentet du skickar till metoden.
Såhär:
<body>
<div id="app">
<button @click="increment(5)">Add 5</button>
<button @click="reduce(3)">reduce 3</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(num){
this.counter = this.counter + num
},
reduce(num) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
</script>
</body>
Detta kodblock sträcker sig över den tidigare Vue-appen för att tillåta vidarebefordran av argument till metoderna kopplade till klickhändelseavlyssnaren på knappen.
Metoderna ökar och reducerar i Vue-instansen tar ett argument num för att öka eller minska motegenskapen.
Det här exemplet visar hur du kan arbeta med argument när du länkar metoder med händelser i Vue. Att länka metoder till evenemang kan hjälpa till att göra Vue-appar mer interaktiva.
Utforska Prevent and Stop Modifiers i Vue
Eventmodifierare i Vue låter dig skapa bättre evenemangslyssnare som tillgodoser de specifika behoven i din applikation. För att använda dessa händelsemodifierare kopplar du modifierarna till händelser i Vue.
Till exempel:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
Kodblocket ovan kedjar förhindra modifierare till inlämningshändelsen. De förhindra modifierare används ofta när man arbetar med formulär i Vue.
De förhindra Modifierarens syfte är att förhindra standardbeteendet för formulärinlämning, vilket är att ladda om sidan. Använder sig av förhindra , kan Vue fortsätta sina processer medan handleSubmit metod tar hand om formulärinlämningen.
Ett annat exempel på en mycket användbar modifierare är sluta händelsemodifierare. De sluta händelsemodifierare stoppar en händelse från att spridas längre upp i DOM-trädet.
Vanligtvis bubblar händelsen av ett HTML-underordnat element upp genom DOM-trädet, vilket aktiverar eventuella händelseavlyssnare kopplade till överordnade element. Du kan förhindra detta händelseutbredning med sluta modifierare och förhindra att händelsen utlöser ytterligare händelseavlyssnare.
För att förstå hur sluta modifierare stoppar spridningen av händelser längre upp i ett DOM-träd, överväg kodblocket nedan:
<body>
<div id="app">
<div @click="outerClick" class="outer">
<div @click.stop="innerClick" class="inner">
<button @click="buttonClick" class="button">Click me</button>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
methods: {
outerClick() {
console.log('Outer click')
},
innerClick() {
console.log('Inner click')
},
buttonClick() {
console.log('Button click')
}
}
});
app.mount("#app");
</script>
</body>
Kodblocket ovan har tre händelseavlyssnare kopplade till tre olika element. De knapp elementet är inuti div med inre klass, medan div med inre klass är inne i div med yttre klass.
Vart och ett av de tre elementen lyssnar efter en klick händelse och loggar till konsolen, klickade på namnet på HTML-elementet. Nedan finns ytterligare klass CSS-stil för att göra ovanstående kodblock lättare att förstå:
<head>
<style>
.outer {
padding: 20px;
background-color: black;
}
.inner {
padding: 20px;
background-color: gray;
}
button {
padding: 10px;
background-color: white;
border: 2px solid black;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
När du kör programmet kommer den skapade Vue-appen att se ut så här:
Observera att när du klickar på knappen anropar programmet knappKlicka metod och loggar ett meddelande till konsolen. Programmet kallar också innerKlick metod.
Programmet kallar dock inte yttre klick metod eftersom kodblocket lade till en sluta modifierare till innerKlick evenemangslyssnare. Detta stoppar händelsen från att spridas längre upp i DOM-trädet.
visa batteri i aktivitetsfältet windows 10
Utan sluta modifierare kommer programmet att anropa knappKlicka metod när du klickar på knappen, och händelsen fortsätter att spridas upp i trädet och når innerKlick metoden och sedan yttre klick metod.
Hantera händelser i webbappar
Du har lärt dig hur man använder händelsebindning i Vue för att koppla händelseavlyssnare till element och hur man anropar metoder när händelser inträffar. Du har också förstått hur man använder händelsemodifierare för att anpassa händelsebeteende.
Webbappar förlitar sig på någon form av användarhändelser för att utföra funktioner. JavaScript är inbyggt med många metoder för att fånga och hantera en mängd av dessa händelser. Dessa händelser hjälper till att bygga interaktiva appar.