Rukovanje događajima važan je dio interakcije s korisnicima i mijenjanja stanja aplikacije u Vue.js. Vue.js pruža različite načine rukovanja događajima, uključujući ugrađene rukovatelje događajima, metode i modifikatore događaja.
Evo nekih uobičajenih događaja u Vue.js
1. click događaj
Ovaj se događaj pokreće kada se klikne element na koji se može kliknuti, poput gumba ili veze. Obično se koristi za izvođenje radnji ili pokretanje funkcija kada korisnik stupi u interakciju s elementom.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input događaj
Ovaj događaj se pokreće kada se promijeni vrijednost elementa input. Obično se koristi s v-model direktivom za vezanje input vrijednosti za svojstvo podataka u Vue komponenti. To vam omogućuje reaktivno ažuriranje i praćenje promjena vrijednosti input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change događaj
Ovaj se događaj pokreće kada se promijeni vrijednost elementa obrasca, kao što je padajući izbornik za odabir ili potvrdni okvir. Obično se koristi za izvođenje radnji ili ažuriranje podataka na temelju odabrane opcije ili označenog stanja elementa.
<select v-model="selectedOption" v-on:change="handleSelectChange">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>data() {
return {
selectedOption: ''
};
},
methods: {
handleSelectChange() {
console.log('Selected option:', this.selectedOption);
}
}
4. submit događaj
Ovaj događaj se pokreće kada se obrazac pošalje, bilo klikom na submit gumb ili pritiskom na Enter unutar input polja. Obično se koristi za rukovanje slanjem obrasca, provjeru valjanosti korisnika input i izvođenje radnji kao što je postavljanje API zahtjeva ili spremanje podataka.
<form v-on:submit="handleSubmit">
<input type="text" v-model="name" />
<button type="submit">Submit</button>
</form>data() {
return {
name: ''
};
},
methods: {
handleSubmit(event) {
event.preventDefault();
console.log('Form submitted! Name:', this.name);
}
}
5. keyup događaj
Ovaj događaj se pokreće kada se tipka otpusti nakon pritiska. Obično se koristi za izvođenje radnji kao odgovor na tipkovnicu input, kao što je filtriranje popisa stavki ili pokretanje funkcije pretraživanja.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown događaj
Ovaj događaj se aktivira kada se tipka pritisne. Obično se koristi za slušanje specifičnih kombinacija tipki ili izvođenje radnji dok je tipka pritisnuta, kao što je navigacija kroz dijaprojekciju ili upravljanje igrom.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover događaj
Ovaj događaj se pokreće kada se pokazivač miša pomakne preko elementa. Obično se koristi za prikaz dodatnih informacija ili pružanje vizualne povratne informacije kada lebdite iznad elementa.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout događaj
Ovaj događaj se pokreće kada se pokazivač miša pomakne izvan elementa. Obično se koristi za skrivanje ili modificiranje elemenata kada miš više ne lebdi iznad njih.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll događaj
Ovaj događaj se pokreće kada se element pomiče. Obično se koristi za implementaciju značajki kao što je beskonačno pomicanje, lijeno učitavanje sadržaja ili ažuriranje elemenata korisničkog sučelja na temelju položaja scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus događaj
Ovaj se događaj pokreće kada element primi focus, obično kada se na njega klikne ili kada korisnik dođe do njega pomoću tipkovnice. Obično se koristi za izvođenje radnji ili pružanje vizualne povratne informacije kada neki input element dobije focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Ovo su samo neki osnovni primjeri događaja u Vue.js. Možete prilagoditi funkcije rukovanja događajima kako bi odgovarale specifičnim potrebama vašeg projekta.