Nangani acara minangka bagéyan penting saka sesambungan karo pangguna lan ngganti negara saka aplikasi ing Vue.js. Vue.js nyedhiyakake macem-macem cara kanggo nangani acara, kalebu panangan acara inline, metode, lan modifier acara.
Kene sawetara acara umum ing Vue.js
1. click acara
Acara iki dipicu nalika unsur sing bisa diklik, kayata tombol utawa link, diklik. Biasane digunakake kanggo nindakake tumindak utawa fungsi pemicu nalika pangguna sesambungan karo unsur kasebut.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input acara
Acara iki micu nalika nilai unsur input diganti. Biasane digunakake karo v-model arahan kanggo ngiket input nilai menyang properti data ing komponen Vue. Iki ngidini sampeyan nganyari kanthi reaktif lan nglacak owah-owahan ing input nilai kasebut.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change acara
Acara iki dipicu nalika nilai unsur wangun, kayata gulung mudhun utawa kothak centhang, diganti. Biasane digunakake kanggo nindakake tumindak utawa nganyari data adhedhasar pilihan sing dipilih utawa status unsur sing dicenthang.
<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 acara
Acara iki dipicu nalika formulir diajukake, kanthi ngeklik tombol submit utawa mencet Ketik ing input lapangan. Biasane digunakake kanggo nangani kiriman formulir, validasi pangguna input, lan nindakake tumindak kayata nggawe panjalukan API utawa nyimpen data.
<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 acara
Acara iki micu nalika tombol diluncurake sawise ditekan mudhun. Biasane digunakake kanggo nindakake tumindak kanggo nanggepi keyboard input, kayata nyaring dhaptar item utawa micu fungsi telusuran.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown acara
Acara iki micu nalika tombol ditekan mudhun. Biasane digunakake kanggo ngrungokake kombinasi tombol tartamtu utawa nindakake tumindak nalika tombol ditahan, kayata navigasi liwat slideshow utawa ngontrol game.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover acara
Acara iki micu nalika pointer mouse dipindhah liwat unsur. Biasane digunakake kanggo nuduhake informasi tambahan utawa menehi umpan balik visual nalika nglayang ing unsur.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout acara
Acara iki micu nalika pointer mouse dipindhah metu saka unsur. Biasane digunakake kanggo ndhelikake utawa ngowahi unsur nalika mouse ora ana maneh nglayang.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll acara
Acara iki micu nalika unsur digulung. Biasane digunakake kanggo ngleksanakake fitur kayata nggulung tanpa wates, kesed loading isi, utawa nganyari unsur UI adhedhasar posisi scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus acara
Acara iki dipicu nalika unsur nampa focus, biasane nalika diklik utawa nalika pangguna navigasi menyang nggunakake keyboard. Biasane digunakake kanggo nindakake tumindak utawa menehi umpan balik visual nalika unsur input utawa unsur entuk focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Iki mung sawetara conto dhasar saka acara ing Vue.js. Sampeyan bisa ngatur fungsi nangani acara kanggo pas karo kabutuhan tartamtu saka project.