Home-theater-designers
Käyttäjätapahtumien kuunteleminen on olennainen osa kaikkia reagoivia verkkosovelluksia, eivätkä Vue-sovellukset ole poikkeus. Vue on rakennettu yksinkertaisella ja tehokkaalla tavalla käsitellä tapahtumia sen v-on-direktiivin avulla.
Mikä on tapahtumaa sitova Vuessa?
Tapahtuman sidonta on Vue.js-ominaisuus, jonka avulla voit liittää tapahtumakuuntelijan a Document Object Model (DOM) elementti. Kun tapahtuma tapahtuu, tapahtuman kuuntelija käynnistää toiminnon tai vastauksen Vue-sovelluksessasi.
PÄIVÄN VIDEON TEKEMINEN JATKA SISÄLLÖLLÄ VIERÄTÄ
Voit saavuttaa tapahtumia sitovan Vuessa käyttämällä v-on direktiivi. Tämä ohje antaa sovelluksesi kuunnella käyttäjien tapahtumia, kuten klikkaus-, syöttö- tai näppäintapahtumia.
Tapahtumien kuuntelijan liittäminen elementtiin käyttämällä v-on , lisää tapahtuman nimi parametriksi direktiiviin:
<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>
Yllä oleva koodilohko näyttää esimerkin Vue-sovelluksesta, joka kuuntelee a klikkaus tapahtuma. Koodilohko käyttää a -painiketta lisäämään laskuri arvo Vue-ilmentymän dataominaisuudessa yhdellä.
Yllä oleva koodilohko sitoo JavaScript-lausekkeen laskuri++ painikkeeseen klikkaus tapahtuman kanssa v-on direktiivi. Vue käyttää @ merkki lyhenteenä sanan tilalle v-on direktiivin vuoksi v-on sen yleinen käyttö:
kuinka tehdä meemi iPhonessa
<button @click="counter++">Click me</button>
Tapahtumasidonta Vuessa ei rajoitu napsautustapahtumiin. Vue käsittelee muita tapahtumia, kuten näppäinpainalluksia, hiiren osoitintapahtumia ja paljon muuta.
Jos haluat sitoa minkä tahansa näistä tapahtumista v-on direktiivi, korvaa klikkaus tapahtuma halutun tapahtuman nimellä:
<button @keydown.enter="counter++">Click me</button>
Yllä oleva koodi määrittää tapahtumakuuntelijan -painiketta joka kuuntelee näppäin alas tapahtuma. Kun mitä tahansa näppäintä painetaan, kun painike on tarkennettu, Vue arvioi laskuri++ ilmaisu.
Tapahtumien linkittäminen Vuen menetelmiin
Useimmissa Vue-sovelluksissa voit käsitellä monimutkaisempaa logiikkaa tiettyjen tapahtumien perusteella. Tapahtumat ja menetelmät toimivat käsi kädessä sovellustoimintojen suorittamiseksi tapahtuman perusteella.
Metodin ominaisuus sisään Vuen asetukset -objekti sisältää tärkeitä toimintoja, joita Vue-sovelluksesi tarvitsee parantaakseen reaktiivisuutta. Vuen method-ominaisuuden avulla voit käsitellä monimutkaista tapahtumiin perustuvaa logiikkaa.
Tässä on esimerkki Vue-sovelluksesta, joka näyttää tapahtumat, jotka käsitellään method-ominaisuuden avulla:
<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>
Yllä oleva Vue-sovellus kuvaa, kuinka tapahtumat linkitetään menetelmiin. Sovelluksessa on kaksi painiketta, joita käyttäjät voivat napsauttaa lisätäkseen tai pienentääkseen tieto-ominaisuuden laskurin arvoa.
Sovellus saavuttaa tämän käyttämällä @klikkaus direktiivi. The @klikkaus direktiivi viittaa funktioihin method-ominaisuudessa laskurin arvon manipuloimiseksi.
Kun linkität argumentin napsautustapahtumaan, voit mukauttaa lisäys- ja vähennysmenetelmiä lisätäksesi tai pienentääksesi laskurin arvoa menetelmälle välittämäsi argumentin perusteella.
Niin kuin:
<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>
Tämä koodilohko ulottuu edelliseen Vue-sovellukseen sallien argumenttien välittämisen menetelmille, jotka on linkitetty painikkeen napsautustapahtuman kuuntelijaan.
kuinka päästä eroon comcast -tekijänoikeuden ponnahdusikkunasta
Vue-instanssin lisäys- ja vähennysmenetelmät ottavat argumentin num-arvon kasvattaakseen tai pienentääkseen laskurin ominaisuutta.
Tämä esimerkki näyttää, kuinka voit työskennellä argumenttien kanssa, kun yhdistät menetelmiä Vuen tapahtumiin. Tapahtumien linkittäminen voi auttaa tekemään Vue-sovelluksista interaktiivisempia.
Vuen esto- ja pysäytysmuokkainten tutkiminen
Vuen tapahtumamuuntajien avulla voit luoda parempia tapahtumakuuntelijoita, jotka vastaavat sovelluksesi erityistarpeita. Käyttääksesi näitä tapahtumamuuntajia ketjutat muuntimet Vuen tapahtumiin.
Esimerkiksi:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
Yllä oleva koodilohko ketjuttaa estää lähetystapahtuman muokkaus. The estää muokkaajaa käytetään yleisesti Vuen lomakkeiden kanssa työskennellessä.
The estää modifierin tarkoitus on estää lomakkeen lähettämisen oletuskäyttäytyminen, joka on sivun lataaminen uudelleen. Käyttämällä estää , Vue voi jatkaa prosessejaan, kun käsitteleLähetä menetelmä huolehtii lomakkeen lähettämisestä.
Toinen esimerkki erittäin hyödyllisestä muuntimesta on lopettaa tapahtuman muokkaaja. The lopettaa tapahtumamuunnos estää tapahtuman etenemisen DOM-puussa.
Yleensä HTML-alaelementin tapahtuma kuplii DOM-puun läpi ja aktivoi kaikki pääelementteihin liitetyt tapahtumaseuraajat. Voit estää tämän tapahtuman leviäminen kanssa lopettaa muokkaaja ja estää tapahtumaa käynnistämästä uusia tapahtumakuuntelijoita.
Ymmärtääksesi kuinka lopettaa muokkaaja pysäyttää tapahtumien etenemisen DOM-puussa, harkitse alla olevaa koodilohkoa:
<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>
Yllä olevassa koodilohkossa on kolme tapahtumakuuntelijaa, jotka on liitetty kolmeen eri elementtiin. The -painiketta elementti on div-elementin sisällä sisäinen luokka, kun taas div kanssa sisäinen luokka on div:n sisällä ulompi luokkaa.
Jokainen kolmesta elementistä kuuntelee a klikkaus tapahtuma ja lokit konsoliin, napsautetun HTML-elementin nimi. Alla on lisäluokan CSS-tyyli, jotta yllä oleva koodilohko on helpompi ymmärtää:
<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>
Ohjelmaa suoritettaessa luotu Vue-sovellus näyttää tältä:
Huomaa, että kun napsautat painiketta, ohjelma kutsuu painikettaNapsauta menetelmä ja kirjaa viestin konsoliin. Ohjelma kutsuu myös innerClick menetelmä.
Ohjelma ei kuitenkaan kutsu outerClick menetelmä, koska koodilohko lisäsi a lopettaa muokkaaja kohtaan innerClick tapahtuman kuuntelija. Tämä estää tapahtumaa leviämästä ylemmäs DOM-puussa.
Windows 10: n Outlook -haku ei toimi
Ilman lopettaa muokkaaja, ohjelma kutsuu painikettaNapsauta -menetelmää, kun napsautat painiketta, ja tapahtuma jatkaa etenemistä ylös puuhun saavuttaen innerClick menetelmä ja sitten outerClick menetelmä.
Tapahtumien käsittely Web Appsissa
Olet oppinut käyttämään tapahtumasidontaa Vuessa tapahtumakuuntelijoiden liittämiseen elementteihin ja kuinka kutsua menetelmiä tapahtumien tapahtuessa. Olet myös ymmärtänyt, kuinka tapahtumien muokkaajia voidaan käyttää tapahtuman käyttäytymisen mukauttamiseen.
Verkkosovellukset käyttävät tiettyjä käyttäjän tapahtumia suorittaakseen toimintoja. JavaScript on sisäänrakennettu monilla menetelmillä erilaisten tapahtumien tallentamiseksi ja käsittelemiseksi. Nämä tapahtumat auttavat luomaan interaktiivisia sovelluksia.