Lær hvordan du kan forbedre arrangementshåndteringen din med Vues v-on-direktiv.

Å lytte til brukerhendelser er en integrert del av enhver responsiv nettapp, og Vue-apper er intet unntak. Vue kommer bygget med en enkel og effektiv måte å håndtere hendelser på med v-on-direktivet.

Hva er hendelsesbinding i Vue?

Hendelsesbinding er en Vue.js-funksjon som lar deg knytte en hendelseslytter til en Document Object Model (DOM) element. Når en hendelse inntreffer, utløser hendelseslytteren en handling eller respons i Vue-appen din.

Du kan oppnå arrangementsbinding i Vue med v-på direktiv. Dette direktivet lar appen din lytte etter brukerhendelser som klikk-, enter- eller tastehendelser.

For å knytte en hendelseslytter til et element ved hjelp av v-på, legg til hendelsesnavnet som en parameter i direktivet:

<html>
<hode>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
hode>
<kropp>
<divid="app">
<knappv-on: klikk="teller++">Klikk på megknapp>
<s>{{ disk}}s>
div>
<manus>
konst app = Vue.createApp({
 data() {
komme tilbake {
 tekst: 'Vue er kjempebra!',
 teller: 0
 }
 }
 })





instagram viewer

 app.mount('#app')
manus>
kropp>
html>

Kodeblokken ovenfor viser et eksempel på en Vue-app som lytter til en klikk begivenhet. Kodeblokken bruker en knapp å øke disk verdi i dataegenskapen til Vue-forekomsten med én.

Kodeblokken ovenfor binder JavaScript-uttrykket teller++ til knappens klikk arrangement med v-på direktiv. Vue bruker @ karakter som en stenografi i stedet for v-på direktiv pga v-påhyppig bruk:

<knapp @klikk="teller++">Klikk på megknapp>

Begivenhetsbinding i Vue er ikke begrenset til klikkhendelser. Vue håndterer andre hendelser, som tastetrykkhendelser, museoverbegivenheter og mer.

For å binde noen av disse hendelsene til v-på direktiv, erstatte klikk arrangement med navnet på ønsket arrangement:

<knapp @keydown.enter="teller++">Klikk på megknapp>

Koden ovenfor setter opp en hendelseslytter på knapp som lytter etter tastene ned begivenhet. Når en tast trykkes mens knappen har fokus, evaluerer Vue teller++ uttrykk.

I de fleste Vue-apper kan du håndtere mer kompleks logikk basert på spesifikke hendelser som oppstår. Hendelser og metoder fungerer hånd i hånd for å utføre apphandlinger basert på en hendelse.

Metodene eiendom i Vues Options Object har viktige funksjoner som Vue-appen din trenger for økt reaktivitet. Med methods-egenskapen i Vue kan du håndtere kompleks logikk basert på hendelser.

Her er et eksempel på en Vue-app som viser hendelser som håndteres av methods-egenskapen:

<html>
<hode>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
hode>
<kropp>
<divid="app">
<knapp @klikk="økning">Legg til 1knapp>
<knapp @klikk="redusere">redusere 1knapp>
<s>{{ disk }}s>
div>
<manus>
 const app = Vue.createApp({
 data() {
 komme tilbake {
 tekst: 'Vue er kjempebra!',
 teller: 0
 }
 },
 metoder: {
 inkrement(){
 this.counter = this.counter + 1
 },
 redusere() {
 this.counter = this.counter - 1
 }
 }
 })
 app.mount('#app')
manus>
kropp>
html>

Vue-appen ovenfor viser hvordan du kobler hendelser med metoder. Appen har to knapper som brukere kan klikke for å øke eller redusere tellerverdien i dataegenskapen.

Appen oppnår dette med @klikk direktiv. De @klikk direktiv peker på funksjonene i methods-egenskapen for å manipulere tellerverdien.

Når du kobler et argument til klikkhendelsen, kan du tilpasse trinnene og redusere metodene for å legge til eller redusere tellerverdien basert på argumentet du sender til metoden.

Som så:

<kropp>
<divid="app">
<knapp @klikk="økning (5)">Legg til 5knapp>
<knapp @klikk="reduser (3)">redusere 3knapp>
<s>{{ disk }}s>
div>


<manus>
 const app = Vue.createApp({
 data() {
 komme tilbake {
 tekst: 'Vue er kjempebra!',
 teller: 0
 }
 },
 metoder: {
 økning (antall){
 this.counter = this.counter + num
 },
 redusere (antall) {
 this.counter = this.counter - num
 }
 }
 })
 app.mount('#app')
manus>
kropp>

Denne kodeblokken strekker seg over den forrige Vue-appen for å tillate overføring av argumenter til metodene knyttet til klikkhendelseslytteren på knappen.

Metodene øker og reduserer i Vue-forekomsten tar et argument num for å øke eller redusere telleregenskapen.

Dette eksemplet viser hvordan du kan jobbe med argumenter når du kobler metoder med hendelser i Vue. Å koble metoder med hendelser kan hjelpe til med å gjøre Vue-apper mer interaktive.

Utforske Prevent and Stop Modifiers i Vue

Eventmodifikatorer i Vue lar deg lage bedre arrangementslyttere som imøtekommer de spesifikke behovene til applikasjonen din. For å bruke disse hendelsesmodifikatorene, kobler du modifikatorene til hendelser i Vue.

For eksempel:

<form @submit.prevent="handleSubmit">
<inputtype="tekst"v-modell="tekst">
<knapptype="sende inn">Sende innknapp>
form>

Kodeblokken ovenfor lenker sammen forhindre modifikator til innsendingshendelsen. De forhindre modifikator brukes ofte når du arbeider med skjemaer i Vue.

De forhindre Modifikatorens formål er å forhindre standardoppførselen til skjemainnsending, som er å laste inn siden på nytt. Ved hjelp av forhindre, kan Vue fortsette sine prosesser mens handleSend inn metoden tar seg av skjemainnleveringen.

Et annet eksempel på en veldig nyttig modifikator er Stoppe hendelsesmodifikator. De Stoppe event modifier stopper en hendelse fra å forplante seg lenger opp i DOM-treet.

Vanligvis bobler hendelsen til et HTML-underordnet element opp gjennom DOM-treet, og aktiverer eventuelle hendelseslyttere knyttet til overordnede elementer. Du kan forhindre dette utbredelse av hendelser med Stoppe modifikator og forhindre at hendelsen utløser flere hendelseslyttere.

For å forstå hvordan Stoppe modifikator stopper forplantningen av hendelser lenger opp i et DOM-tre, tenk på kodeblokken nedenfor:

<kropp>
<divid="app">
<div @klikk="outerClick"klasse="ytre">
<div @klikk.stopp="innerClick"klasse="indre">
<knapp @klikk="knappKlikk"klasse="knapp">Klikk på megknapp>
div>
div>
div>
<manus>
 const app = Vue.createApp({
 metoder: {
 outerClick() {
 console.log('Ytre klikk')
 },
 innerClick() {
 console.log('Indre klikk')
 },
 buttonClick() {
 console.log('Knappklikk')
 }
 }
 });
 app.mount("#app");
manus>
kropp>

Kodeblokken ovenfor har tre hendelseslyttere knyttet til tre forskjellige elementer. De knapp element er inne i div med indre klasse, mens div med indre klasse er inne i div med ytre klasse.

Hvert av de tre elementene lytter etter en klikk hendelse og logger til konsollen, klikket navnet på HTML-elementet. Nedenfor er ekstra klasse CSS-styling for å gjøre kodeblokken ovenfor enklere å forstå:

<hode>
<stil>
 .outer {
 polstring: 20px;
 bakgrunnsfarge: svart;
 }
 .indre {
 polstring: 20px;
 bakgrunnsfarge: grå;
 }
 knapp {
 polstring: 10px;
 bakgrunnsfarge: hvit;
 kantlinje: 2px helt svart;
 skriftstørrelse: 16px;
 font-weight: fet;
 markør: peker;
 }
stil>
hode>

Når du kjører programmet, vil den opprettede Vue-appen se slik ut:

Merk at når du klikker på knappen, kaller programmet opp knapp Klikk metode og logger en melding til konsollen. Programmet kaller også innerKlikk metode.

Programmet kaller imidlertid ikke ytreKlikk metode fordi kodeblokken la til en Stoppe modifikator til innerKlikk begivenhetslytter. Dette stopper hendelsen fra å forplante seg lenger opp i DOM-treet.

Uten Stoppe modifikator, vil programmet kalle opp knapp Klikk metoden når du klikker på knappen, og hendelsen fortsetter å forplante seg oppover treet og når innerKlikk metoden og deretter ytreKlikk metode.

Håndtering av hendelser i webapper

Du har lært hvordan du bruker hendelsesbinding i Vue for å knytte hendelseslyttere til elementer og hvordan du kaller metoder når hendelser inntreffer. Du har også forstått hvordan du bruker hendelsesmodifikatorer for å tilpasse hendelsesatferd.

Nettapper er avhengige av en form for brukerhendelser for å utføre funksjoner. JavaScript kommer innebygd med mange metoder for å fange opp og håndtere en rekke av disse hendelsene. Disse hendelsene hjelper deg med å bygge interaktive apper.