Home-theater-designers
Osluškivanje korisničkih događaja sastavni je dio svake responzivne web aplikacije, a Vue aplikacije nisu iznimka. Vue je izgrađen s jednostavnim i učinkovitim načinom za rukovanje događajima pomoću v-on direktive.
Što je povezivanje događaja u Vueu?
Povezivanje događaja je značajka Vue.js koja vam omogućuje da priložite slušatelja događaja na Objektni model dokumenta (DOM) element. Kada se dogodi događaj, slušatelj događaja pokreće radnju ili odgovor u vašoj aplikaciji Vue.
MAKEUSEOF VIDEO DANA POMICI SE ZA NASTAVAK SA SADRŽAJEM
Možete postići povezivanje događaja u Vueu s v-na direktiva. Ova direktiva vašoj aplikaciji omogućuje slušanje korisničkih događaja kao što su događaji klika, unosa ili preuzimanja ključa.
Da biste priložili slušatelja događaja elementu pomoću v-na , dodajte naziv događaja kao parametar direktivi:
<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>
Gornji blok koda prikazuje primjer aplikacije Vue koja sluša a klik događaj. Blok koda koristi a dugme povećati brojač vrijednost u svojstvu podataka instance Vue za jedan.
Gore navedeni blok koda povezuje JavaScript izraz brojač++ do gumba klik događaj s v-na direktiva. Vue koristi @ znak kao skraćenica umjesto v-na direktiva zbog v-na česta upotreba:
<button @click="counter++">Click me</button>
Povezivanje događaja u Vueu nije ograničeno na događaje klika. Vue obrađuje druge događaje, poput događaja pritiska tipke, događaja prelaska mišem i još mnogo toga.
Vezati bilo koji od ovih događaja za v-na direktiva, zamijeniti klik događaj s nazivom željenog događaja:
<button @keydown.enter="counter++">Click me</button>
Gornji kod postavlja slušatelja događaja na dugme koji sluša za spuštanje tipke događaj. Kada se pritisne bilo koja tipka dok je gumb u fokusu, Vue procjenjuje brojač++ izraz.
Povezivanje događaja s metodama u Vueu
U većini Vue aplikacija možete upravljati složenijom logikom na temelju specifičnih događaja koji se događaju. Događaji i metode rade ruku pod ruku za izvođenje radnji aplikacije na temelju događaja.
Svojstvo metode u Vueov objekt opcija sadrži važne funkcije koje vaša aplikacija Vue treba za poboljšanu reaktivnost. Sa svojstvom metode u Vueu možete upravljati složenom logikom koja se temelji na događajima.
Evo primjera Vue aplikacije koja prikazuje događaje kojima upravlja svojstvo metode:
<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>
Gornja aplikacija Vue opisuje kako povezati događaje s metodama. Aplikacija ima dva gumba koje korisnici mogu kliknuti za povećanje ili smanjenje vrijednosti brojača u svojstvu podataka.
Aplikacija to postiže pomoću @klik direktiva. The @klik direktiva ukazuje na funkcije u svojstvu metode za manipuliranje vrijednošću brojača.
Kada povezujete argument s događajem klika, možete prilagoditi metode povećanja i smanjenja kako biste dodali ili smanjili vrijednost brojača na temelju argumenta koji proslijedite metodi.
kako popraviti sim koji nije predviđen
ovako:
<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>
Ovaj blok koda proširuje se na prethodnu aplikaciju Vue kako bi omogućio prosljeđivanje argumenata metodama povezanim sa slušateljem događaja klika na gumbu.
Metode increment i reduce u Vue instanci uzimaju argument num za povećanje ili smanjenje svojstva brojača.
kako povećati Mac pomoću trackpada
Ovaj primjer pokazuje kako možete raditi s argumentima kada povezujete metode s događajima u Vueu. Povezivanje metoda s događajima može pomoći da aplikacije Vue postanu interaktivnije.
Istraživanje modifikatora Prevent i Stop u Vueu
Modifikatori događaja u Vueu omogućuju vam stvaranje boljih slušatelja događaja koji zadovoljavaju specifične potrebe vaše aplikacije. Da biste koristili ove modifikatore događaja, lančano povezujete modifikatore s događajima u Vueu.
Na primjer:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
Gornji blok koda ulančava spriječiti modifikator događaja slanja. The spriječiti modifikator se obično koristi pri radu s obrascima u Vueu.
The spriječiti Svrha modifikatora je spriječiti zadano ponašanje slanja obrasca, a to je ponovno učitavanje stranice. Korištenje spriječiti , Vue može nastaviti svoje procese dok rukovanjePošalji metoda brine o podnošenju obrasca.
Drugi primjer vrlo korisnog modifikatora je Stop modifikator događaja. The Stop modifikator događaja zaustavlja širenje događaja dalje u DOM stablu.
Obično se događaj HTML podređenog elementa pojavljuje u mjehurićima kroz DOM stablo, aktivirajući sve slušatelje događaja pridružene nadređenim elementima. To možete spriječiti širenje događaja s Stop modifikator i spriječi događaj da pokrene daljnje slušatelje događaja.
Da biste razumjeli kako Stop modifikator zaustavlja širenje događaja dalje u DOM stablu, razmotrite blok koda u nastavku:
<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>
Gornji blok koda ima tri slušača događaja pridružena trima različitim elementima. The dugme element je unutar diva s unutarnji razreda, dok je div s unutarnji klasa je unutar diva s vanjski razreda.
Svaki od tri elementa sluša a klik događaj i zapisuje na konzolu, kliknuto je ime HTML elementa. Ispod je CSS stil dodatne klase kako bi gornji blok koda bio lakši za razumijevanje:
<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>
Nakon pokretanja programa, stvorena aplikacija Vue izgledat će ovako:
Imajte na umu da kada kliknete gumb, program poziva gumb Kliknite metodu i zapisuje poruku na konzolu. Program također poziva innerClick metoda.
Međutim, program ne poziva vanjski klik metoda jer je blok koda dodao a Stop modifikator za innerClick slušatelj događaja. Ovo zaustavlja dalje širenje događaja prema DOM stablu.
Bez toga Stop modifikator, program će pozvati gumb Kliknite kada kliknete gumb, a događaj će se nastaviti širiti stablom, dosežući do innerClick metoda, a zatim vanjski klik metoda.
Rukovanje događajima u web aplikacijama
Naučili ste kako koristiti povezivanje događaja u Vueu za pripajanje slušatelja događaja elementima i kako pozvati metode kada se događaji dogode. Također ste razumjeli kako koristiti modifikatore događaja za prilagodbu ponašanja događaja.
Web-aplikacije se oslanjaju na neki oblik korisničkih događaja za izvršavanje funkcija. JavaScript dolazi s ugrađenim mnoštvom metoda za hvatanje i rukovanje raznim tim događajima. Ovi događaji pomažu u izradi interaktivnih aplikacija.