Upravljanje dogodkov je pomemben del interakcije z uporabniki in spreminjanja stanja aplikacije v Vue.js. Vue.js ponuja različne načine za obravnavanje dogodkov, vključno z vgrajenimi obdelovalci dogodkov, metodami in modifikatorji dogodkov.
Tukaj je nekaj pogostih dogodkov v Vue.js
1. click dogodek
Ta dogodek se sproži, ko se klikne element, ki ga je mogoče klikniti, kot je gumb ali povezava. Običajno se uporablja za izvajanje dejanj ali sprožitev funkcij, ko uporabnik komunicira z elementom.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input dogodek
Ta dogodek se sproži, ko se spremeni vrednost elementa input. Običajno se uporablja z v-model direktivo za povezovanje input vrednosti z lastnostjo podatkov v komponenti Vue. To vam omogoča reaktivno posodabljanje in sledenje spremembam vrednosti input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change dogodek
Ta dogodek se sproži, ko se spremeni vrednost elementa obrazca, kot je spustni meni za izbiro ali potrditveno polje. Običajno se uporablja za izvajanje dejanj ali posodobitev podatkov na podlagi izbrane možnosti ali označenega 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 dogodek
Ta dogodek se sproži, ko je obrazec predložen, bodisi s klikom na submit gumb ali pritiskom na Enter znotraj input polja. Običajno se uporablja za obdelavo oddaje obrazca, preverjanje uporabnika input in izvajanje dejanj, kot je izstavljanje zahtev API ali shranjevanje podatkov.
<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 dogodek
Ta dogodek se sproži, ko se tipka po pritisku spusti. Običajno se uporablja za izvajanje dejanj kot odziv na tipkovnico input, kot je filtriranje seznama elementov ali sprožitev funkcije iskanja.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown dogodek
Ta dogodek se sproži, ko pritisnete tipko. Običajno se uporablja za poslušanje določenih kombinacij tipk ali izvajanje dejanj, medtem ko je tipka pritisnjena, kot je navigacija po diaprojekciji ali nadzor igre.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover dogodek
Ta dogodek se sproži, ko se kazalec miške premakne nad element. Običajno se uporablja za prikaz dodatnih informacij ali zagotavljanje vizualnih povratnih informacij, ko lebdite nad elementom.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout dogodek
Ta dogodek se sproži, ko se kazalec miške premakne iz elementa. Običajno se uporablja za skrivanje ali spreminjanje elementov, ko miška ne lebdi več nad njimi.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll dogodek
Ta dogodek se sproži, ko se element premika. Običajno se uporablja za izvajanje funkcij, kot je neskončno drsenje, leno nalaganje vsebine ali posodabljanje elementov uporabniškega vmesnika glede na scroll položaj.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus dogodek
Ta dogodek se sproži, ko element prejme focus, običajno ko ga klikne ali ko se uporabnik pomakne do njega s tipkovnico. Običajno se uporablja za izvajanje dejanj ali zagotavljanje vizualnih povratnih informacij, ko input element pridobi focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
To je le nekaj osnovnih primerov dogodkov v Vue.js. Funkcije za obravnavo dogodkov lahko prilagodite tako, da ustrezajo posebnim potrebam vašega projekta.