Home-theater-designers
Kasutajasündmuste kuulamine on iga tundliku veebirakenduse lahutamatu osa ja Vue rakendused pole erand. Vue on ehitatud lihtsa ja tõhusa viisiga sündmuste käsitlemiseks selle v-on direktiiviga.
Mis on sündmuste sidumine Vue's?
Sündmuste sidumine on Vue.js-i funktsioon, mis võimaldab lisada sündmusekuulaja a Dokumendiobjekti mudel (DOM) element. Kui sündmus toimub, käivitab sündmusekuulaja teie Vue rakenduses toimingu või vastuse.
millal on tiktok Ameerikas keelatud?PÄEVA VIDEO MAKKEUSE SISUGA JÄTKAMISEKS KERIMISE
Saate Vue's sündmusi siduda, kasutades v-on direktiiv. See käsk võimaldab teie rakendusel kuulata kasutaja sündmusi, nagu klõpsamine, sisestus või klahvivajutus.
Sündmuskuulaja lisamiseks elemendile kasutades v-on , lisage käskkirja parameetrina sündmuse nimi:
<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>
Ülaltoodud koodiplokk näitab näidet Vue rakendusest, mis kuulab a klõpsa sündmus. Koodiplokk kasutab a nuppu suurendamiseks loendur väärtus Vue eksemplari andmeatribuudis ühe võrra.
Ülaltoodud koodiplokk seob JavaScripti avaldise loendur++ nupu juurde klõpsa üritus koos v-on direktiiv. Vue kasutab @ tähemärki stenogrammina asemel v-on direktiivi tõttu v-on sagedane kasutamine:
<button @click="counter++">Click me</button>
Vue sündmuste sidumine ei piirdu klõpsamissündmustega. Vue haldab muid sündmusi, nagu klahvivajutuse sündmused, hiirekursori sündmused ja palju muud.
Nende sündmuste sidumiseks v-on direktiiv asendada klõpsa sündmus soovitud sündmuse nimega:
<button @keydown.enter="counter++">Click me</button>
Ülaltoodud kood seadistab seadmes sündmuste kuulaja nuppu mis kuulab klahvi alla sündmus. Kui suvalisele klahvile vajutatakse, kui nupul on fookus, hindab Vue seda loendur++ väljendus.
Sündmuste sidumine Vue meetoditega
Enamikus Vue rakendustes saate käsitleda keerukamat loogikat, mis põhineb konkreetsetel sündmustel. Sündmused ja meetodid töötavad käsikäes, et teha sündmusel põhinevaid rakenduse toiminguid.
Meetodite omadus Vue valikute objekt sisaldab olulisi funktsioone, mida teie Vue rakendus vajab täiustatud reageerimisvõime jaoks. Vue meetodite atribuudiga saate käsitleda sündmustel põhinevat keerulist loogikat.
Siin on näide Vue rakendusest, mis näitab sündmusi, mida käsitleb atribuudi meetodid:
<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>
Ülaltoodud rakendus Vue kirjeldab, kuidas sündmusi meetoditega siduda. Rakendusel on kaks nuppu, millel kasutajad saavad klõpsata andmete atribuudi loenduri väärtuse suurendamiseks või vähendamiseks.
Rakendus saavutab selle rakendusega @klõps direktiiv. The @klõps direktiiv osutab funktsioonidele atribuudis meetodid loenduri väärtusega manipuleerimiseks.
Argumendi linkimisel klõpsusündmusega saate meetodile edastatud argumendi alusel loenduri väärtuse lisamiseks või vähendamiseks kohandada suurendamise ja vähendamise meetodeid.
Nagu nii:
<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>
See koodiplokk laieneb eelmisele Vue rakendusele, et võimaldada argumentide edastamist meetoditele, mis on lingitud nupu klõpsamissündmuste kuulajaga.
Vue eksemplari suurendamise ja vähendamise meetodid kasutavad loenduri atribuudi suurendamiseks või vähendamiseks argumendi numbrit.
See näide näitab, kuidas saate Vue sündmustega meetodite linkimisel argumentidega töötada. Meetodite sidumine sündmustega võib aidata muuta Vue rakendused interaktiivsemaks.
Vue ennetamise ja peatamise modifikaatorite uurimine
Vue sündmuste modifikaatorid võimaldavad teil luua paremaid sündmuste kuulajaid, mis vastavad teie rakenduse konkreetsetele vajadustele. Nende sündmuste modifikaatorite kasutamiseks aheldate modifikaatorid Vue sündmustega.
kuidas kirjutada iso USB -le
Näiteks:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
Ülaltoodud koodiplokk aheldab ära hoida esitamise sündmuse muutja. The ära hoida modifikaatorit kasutatakse tavaliselt Vue vormidega töötamisel.
The ära hoida modifikaatori eesmärk on takistada vormi esitamise vaikekäitumist, milleks on lehe uuesti laadimine. Kasutades ära hoida , Vue saab oma protsesse jätkata, kui käepide Esita meetod hoolitseb vormi esitamise eest.
Teine näide väga kasulikust modifikaatorist on peatus sündmuse muutja. The peatus sündmuse modifikaator peatab sündmuse levimise DOM-puus ülespoole.
Tavaliselt muliseb HTML-i alamelemendi sündmus läbi DOM-puu, aktiveerides kõik ülemelementidega seotud sündmusekuulajad. Saate seda vältida sündmuste levik koos peatus modifikaatorit ja takistada sündmusel käivitada uusi sündmusekuulajaid.
Et mõista, kuidas peatus modifikaator peatab sündmuste levimise DOM-puust ülespoole, kaaluge allolevat koodiplokki:
kuidas muuta png pdf -failiks
<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>
Ülaltoodud koodiplokil on kolm sündmusekuulajat, mis on kinnitatud kolme erineva elemendi külge. The nuppu element on div sees koos sisemine klass, samas kui div koos sisemine klass on divisis koos välimine klass.
Kõik kolm elementi kuulavad a klõpsa sündmus ja logid konsooli, klõpsatud HTML-elemendi nimel. Allpool on täiendav klassi CSS-stiil, et ülaltoodud koodiplokk oleks hõlpsamini mõistetav:
<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>
Programmi käivitamisel näeb loodud Vue rakendus välja selline:
Pange tähele, et kui klõpsate nuppu, kutsub programm välja nuppKlõpsa meetodit ja logib konsooli sõnumi. Programm kutsub ka üles sisemine klõps meetod.
Kuid programm ei kutsu välimine klõps meetod, kuna koodiplokk lisas a peatus modifikaator sisemine klõps sündmuste kuulaja. See peatab sündmuse levimise DOM-puus edasi.
Ilma peatus modifikaatorit, kutsub programm välja nuppKlõpsa meetodil, kui klõpsate nuppu, ja sündmus jätkab levitamist puust ülespoole, jõudes kohale sisemine klõps meetod ja seejärel välimine klõps meetod.
Sündmuste haldamine veebirakendustes
Olete õppinud, kuidas kasutada Vue's sündmuste sidumist sündmuste kuulajate lisamiseks elementidele ja kuidas sündmuste esinemisel meetodeid kutsuda. Olete ka aru saanud, kuidas sündmuste teisendajaid sündmuste käitumise kohandamiseks kasutada.
Veebirakendused toetuvad funktsioonide täitmiseks teatud tüüpi kasutaja sündmustele. JavaScript on sisseehitatud paljude meetodite abil mitmesuguste sündmuste jäädvustamiseks ja käsitlemiseks. Need sündmused aitavad luua interaktiivseid rakendusi.