Naučite kako podići razinu rukovanja događajima pomoću Vue v-on direktive.

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.

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>
<glava>
<skriptasrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripta>
glava>
<tijelo>
<diviskaznica="aplikacija">
<dugmev-on: klik="brojač++">Klikni me
dugme>
<str>{{ brojač}}str>
div>
<skripta>
konst app = Vue.createApp({
 podaci() {
povratak {
 tekst: 'Vue je super!',
 brojač: 0
 }
 }
 })
 app.mount('#aplikacija')
skripta>
tijelo>
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:

<dugme @klik="brojač++">Klikni medugme>

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:

<dugme @spuštanje tipke.unesite="brojač++">Klikni medugme>

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.

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>
<glava>
<skriptasrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripta>
glava>
<tijelo>
<diviskaznica="aplikacija">
<dugme @klik="prirast">Dodaj 1dugme>
<dugme @klik="smanjiti">smanjiti 1dugme>
<str>{{ brojač }}str>
div>
<skripta>
 const app = Vue.createApp({
 podaci() {
 povratak {
 tekst: 'Vue je super!',
 brojač: 0
 }
 },
 metode: {
 povećanje(){
 ovaj.brojač = ovaj.brojač + 1
 },
 smanjiti() {
 ovaj.brojač = ovaj.brojač - 1
 }
 }
 })
 app.mount('#app')
skripta>
tijelo>
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.

ovako:

<tijelo>
<diviskaznica="aplikacija">
<dugme @klik="povećanje (5)">Dodajte 5dugme>
<dugme @klik="smanji (3)">smanjiti 3dugme>
<str>{{ brojač }}str>
div>


<skripta>
 const app = Vue.createApp({
 podaci() {
 povratak {
 tekst: 'Vue je super!',
 brojač: 0
 }
 },
 metode: {
 povećanje (broj){
 ovaj.brojač = ovaj.brojač + br
 },
 smanjiti (broj) {
 ovaj.brojač = ovaj.brojač - br
 }
 }
 })
 app.mount('#app')
skripta>
tijelo>

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.

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:

<oblik @podnijeti.spriječiti="handleSubmit">
<ulaznitip="tekst"v-model="tekst">
<dugmetip="podnijeti">podnijetidugme>
oblik>

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:

<tijelo>
<diviskaznica="aplikacija">
<div @klik="outerClick"razreda="vanjski">
<div @klik.zaustavi="unutarnji klik"razreda="unutarnji">
<dugme @klik="gumbKlik"razreda="dugme">Klikni medugme>
div>
div>
div>
<skripta>
 const app = Vue.createApp({
 metode: {
 vanjskiKlik() {
 console.log('Vanjski klik')
 },
 innerClick() {
 console.log('Unutarnji klik')
 },
 buttonClick() {
 console.log('Klik na gumb')
 }
 }
 });
 app.mount("#app");
skripta>
tijelo>

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:

<glava>
<stil>
 .vanjski {
 ispuna: 20px;
 boja pozadine: crna;
 }
 .unutarnji {
 ispuna: 20px;
 boja pozadine: siva;
 }
 dugme {
 ispuna: 10px;
 boja pozadine: bijela;
 obrub: 2px puna crna;
 veličina fonta: 16px;
 font-weight: bold;
 kursor: pokazivač;
 }
stil>
glava>

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.