Leer hoe u uw evenementafhandeling naar een hoger niveau kunt tillen met de v-on-richtlijn van Vue.
Luisteren naar gebruikersgebeurtenissen is een integraal onderdeel van elke responsieve webapp en Vue-apps vormen daarop geen uitzondering. Vue is gebouwd met een eenvoudige en efficiënte manier om evenementen af te handelen met zijn v-on-richtlijn.
Wat is gebeurtenisbinding in Vue?
Gebeurtenisbinding is een Vue.js-functie waarmee u een gebeurtenislistener kunt koppelen aan een Documentobjectmodel (DOM) element. Wanneer een gebeurtenis plaatsvindt, activeert de gebeurtenislistener een actie of reactie in uw Vue-app.
U kunt gebeurtenisbinding in Vue bereiken met de v-aan richtlijn. Met deze instructie kan uw app luisteren naar gebruikersgebeurtenissen zoals klik-, enter- of key-upgebeurtenissen.
Een gebeurtenislistener koppelen aan een element met behulp van v-aan, voeg de gebeurtenisnaam toe als een parameter aan de richtlijn:
<html>
<hoofd>
<scriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js"> script>
hoofd>
<lichaam>
<divID kaart="app">
<knopv-aan: klik="teller++">Klik hierknop>
<P>{{ balie}}P>
div>
<script>
const app = Vue.createApp({
gegevens() {
opbrengst {
tekst: 'Vue is geweldig!',
teller: 0
}
}
})
app.mount('#app')
script>
lichaam>
html>
Het bovenstaande codeblok toont een voorbeeld van een Vue-app die luistert naar een Klik evenement. Het codeblok gebruikt een knop om de te verhogen balie waarde in de eigenschap data van de Vue-instantie met één.
Het bovenstaande codeblok bindt de JavaScript-expressie tegen++ naar de knoppen Klik evenement met de v-aan richtlijn. Vue gebruikt de @ karakter als een afkorting in plaats van de v-aan richtlijn vanwege v-aan's veelvuldig gebruik:
<knop @Klik="teller++">Klik hierknop>
Gebeurtenisbinding in Vue is niet beperkt tot klikgebeurtenissen. Vue handelt andere gebeurtenissen af, zoals toetsaanslagen, mouseover-gebeurtenissen en meer.
Om een van deze evenementen te binden aan de v-aan richtlijn, vervang de Klik evenement met de naam van het gewenste evenement:
<knop @keydown.enter="teller++">Klik hierknop>
De bovenstaande code stelt een gebeurtenislistener in op de knop dat luistert naar de toets neer evenement. Wanneer een toets wordt ingedrukt terwijl de knop focus heeft, evalueert Vue de tegen++ uitdrukking.
In de meeste Vue-apps kunt u complexere logica aan op basis van specifieke gebeurtenissen die zich voordoen. Gebeurtenissen en methoden werken hand in hand om app-acties uit te voeren op basis van een gebeurtenis.
De eigenschap methoden in Vue's Options-object bevat belangrijke functies die uw Vue-app nodig heeft voor verbeterde reactiviteit. Met de eigenschap methods in Vue kunt u omgaan met complexe logica op basis van gebeurtenissen.
Hier is een voorbeeld van een Vue-app die gebeurtenissen weergeeft die worden afgehandeld door de eigenschap methods:
<html>
<hoofd>
<scriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">script>
hoofd>
<lichaam>
<divID kaart="app">
<knop @Klik="verhoging">Voeg 1 toeknop>
<knop @Klik="verminderen">verkleinen 1knop>
<P>{{ balie }}P>
div>
<script>
const app = Vue.createApp({
gegevens() {
opbrengst {
tekst: 'Vue is geweldig!',
teller: 0
}
},
methoden: {
verhogen(){
deze.teller = deze.teller + 1
},
verminderen() {
deze.teller = deze.teller - 1
}
}
})
app.mount('#app')
script>
lichaam>
html>
De bovenstaande Vue-app laat zien hoe gebeurtenissen aan methoden kunnen worden gekoppeld. De app heeft twee knoppen waarop gebruikers kunnen klikken om de tellerwaarde in de gegevenseigenschap te verhogen of te verlagen.
De app bereikt dit met de @Klik richtlijn. De @Klik richtlijn verwijst naar de functies in de eigenschap methods om de tellerwaarde te manipuleren.
Wanneer u een argument aan de klikgebeurtenis koppelt, kunt u de methoden voor verhogen en verlagen aanpassen om de tellerwaarde toe te voegen of te verlagen op basis van het argument dat u aan de methode doorgeeft.
Zoals zo:
<lichaam>
<divID kaart="app">
<knop @Klik="verhoging (5)">Voeg 5 toeknop><knop @Klik="verminderen (3)">verkleinen 3knop>
<P>{{ balie }}P>
div><script>
const app = Vue.createApp({
gegevens() {
opbrengst {
tekst: 'Vue is geweldig!',
teller: 0
}
},
methoden: {
verhoging (aantal){
deze.teller = deze.teller + num
},
verkleinen (aantal) {
deze.teller = deze.teller - num
}
}
})
app.mount('#app')
script>
lichaam>
Dit codeblok breidt zich uit op de vorige Vue-app om het doorgeven van argumenten aan de methoden die zijn gekoppeld aan de klikgebeurtenislistener op de knop mogelijk te maken.
De methoden increment en reduce in de Vue-instantie hebben een argument num nodig om de eigenschap counter te verhogen of te verlagen.
Dit voorbeeld laat zien hoe u met argumenten kunt werken bij het koppelen van methoden aan gebeurtenissen in Vue. Het koppelen van methoden aan evenementen kan helpen om Vue-apps interactiever te maken.
De preventie- en stopmodificaties in Vue verkennen
Met gebeurtenismodificaties in Vue kunt u betere gebeurtenisluisteraars maken die voldoen aan de specifieke behoeften van uw toepassing. Om deze gebeurtenismodifiers te gebruiken, koppelt u de modifiers aan gebeurtenissen in Vue.
Bijvoorbeeld:
<formulier @indienen.voorkomen="afhandelenVerzenden">
<invoertype="tekst"v-model="tekst">
<knoptype="indienen">Indienenknop>
formulier>
Het codeblok hierboven ketent de voorkomen modifier voor het onderwerp indienen. De voorkomen modifier wordt vaak gebruikt bij het werken met formulieren in Vue.
De voorkomen Het doel van de modifier is om het standaardgedrag van het indienen van formulieren, namelijk het opnieuw laden van de pagina, te voorkomen. Gebruik makend van voorkomen, kan Vue zijn processen voortzetten terwijl de handvatVerzenden methode zorgt voor de indiening van het formulier.
Een ander voorbeeld van een zeer nuttige modifier is de stop evenement modifier. De stop gebeurtenismodifier voorkomt dat een gebeurtenis zich verder omhoog in de DOM-structuur voortplant.
Gewoonlijk borrelt de gebeurtenis van een HTML-onderliggend element omhoog door de DOM-structuur, waarbij alle gebeurtenislisteners worden geactiveerd die aan bovenliggende elementen zijn gekoppeld. U kunt dit voorkomen voortplanting van evenementen met de stop modifier en voorkom dat de gebeurtenis verdere gebeurtenislisteners activeert.
Om te begrijpen hoe de stop modifier stopt de verspreiding van gebeurtenissen hogerop in een DOM-boom, bekijk het onderstaande codeblok:
<lichaam>
<divID kaart="app">
<div @Klik="buitenKlik"klas="buitenste">
<div @klik.stop="innerlijke klik"klas="innerlijk">
<knop @Klik="knopKlik"klas="knop">Klik hierknop>
div>
div>
div>
<script>
const app = Vue.createApp({
methoden: {
outerClick() {
console.log('Buitenste klik')
},
innerlijkeKlik() {
console.log('Innerlijke klik')
},
knopKlik() {
console.log('Knopklik')
}
}
});
app.mount("#app");
script>
lichaam>
Het bovenstaande codeblok heeft drie gebeurtenislisteners die aan drie verschillende elementen zijn gekoppeld. De knop element bevindt zich in de div met de innerlijk class, terwijl de div met de innerlijk klasse bevindt zich in de div met de buitenste klas.
Elk van de drie elementen luistert naar a Klik gebeurtenis en logt naar de console, de naam van het HTML-element waarop is geklikt. Hieronder vindt u extra klasse-CSS-stijlen om het bovenstaande codeblok begrijpelijker te maken:
<hoofd>
<stijl>
.buitenste {
opvulling: 20px;
achtergrondkleur: zwart;
}
.innerlijke {
opvulling: 20px;
achtergrondkleur: grijs;
}
knop {
opvulling: 10px;
achtergrondkleur: wit;
rand: 2px effen zwart;
lettergrootte: 16px;
font-weight: vet;
cursor: aanwijzer;
}
stijl>
hoofd>Bij het uitvoeren van het programma ziet de gemaakte Vue-app er als volgt uit:
Merk op dat wanneer u op de knop klikt, het programma het knopKlik methode en registreert een bericht naar de console. Het programma roept ook de binnenKlik methode.
Het programma roept echter niet de outerClick methode omdat het codeblok een stop modificatie aan de binnenKlik gebeurtenis luisteraar. Dit voorkomt dat de gebeurtenis zich verder in de DOM-structuur voortplant.
Zonder de stop modifier, zal het programma de knopKlik methode wanneer u op de knop klikt, en de gebeurtenis zal zich blijven voortplanten in de boom, het bereiken van de binnenKlik methode en dan de outerClick methode.
Gebeurtenissen afhandelen in webapps
U hebt geleerd hoe u gebeurtenisbinding in Vue gebruikt om gebeurtenislisteners aan elementen te koppelen en hoe u methoden aanroept wanneer gebeurtenissen plaatsvinden. Je hebt ook begrepen hoe je event-modifiers kunt gebruiken om het gedrag van events aan te passen.
Web-apps zijn afhankelijk van een of andere vorm van gebruikersgebeurtenissen om functies uit te voeren. JavaScript is ingebouwd met veel methoden om verschillende van deze gebeurtenissen vast te leggen en af te handelen. Deze evenementen helpen bij het bouwen van interactieve apps.
