Mengendalikan acara ialah bahagian penting dalam berinteraksi dengan pengguna dan mengubah keadaan aplikasi dalam Vue.js. Vue.js menyediakan pelbagai cara untuk mengendalikan acara, termasuk pengendali acara sebaris, kaedah dan pengubah suai acara.
Berikut ialah beberapa acara biasa dalam Vue.js
1. click peristiwa
Peristiwa ini dicetuskan apabila elemen boleh klik, seperti butang atau pautan, diklik. Ia biasanya digunakan untuk melakukan tindakan atau mencetuskan fungsi apabila pengguna berinteraksi dengan elemen.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input peristiwa
Peristiwa ini dicetuskan apabila nilai input elemen berubah. Ia biasanya digunakan dengan v-model arahan untuk mengikat input nilai pada sifat data dalam komponen Vue. Ini membolehkan anda mengemas kini dan menjejaki perubahan input nilai secara reaktif.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change acara
Peristiwa ini dicetuskan apabila nilai elemen borang, seperti lungsur turun atau kotak pilihan, ditukar. Ia biasanya digunakan untuk melakukan tindakan atau mengemas kini data berdasarkan pilihan yang dipilih atau keadaan elemen yang diperiksa.
<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
Peristiwa ini dicetuskan apabila borang diserahkan, sama ada dengan mengklik butang submit atau menekan Enter di dalam input medan. Ia biasanya digunakan untuk mengendalikan penyerahan borang, mengesahkan pengguna input dan melakukan tindakan seperti membuat permintaan API atau menyimpan 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
Peristiwa ini dicetuskan apabila kekunci dilepaskan selepas ditekan ke bawah. Ia biasanya digunakan untuk melakukan tindakan sebagai tindak balas kepada papan kekunci input, seperti menapis senarai item atau mencetuskan fungsi carian.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown acara
Peristiwa ini dicetuskan apabila kekunci ditekan ke bawah. Ia biasanya digunakan untuk mendengar kombinasi kekunci tertentu atau melakukan tindakan semasa kekunci ditekan, seperti menavigasi melalui tayangan slaid atau mengawal permainan.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover acara
Peristiwa ini dicetuskan apabila penunjuk tetikus dialihkan ke atas elemen. Ia biasanya digunakan untuk menunjukkan maklumat tambahan atau memberikan maklum balas visual apabila menuding pada elemen.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout acara
Peristiwa ini dicetuskan apabila penuding tetikus dialihkan keluar daripada elemen. Ia biasanya digunakan untuk menyembunyikan atau mengubah suai elemen apabila tetikus tidak lagi melayang di atasnya.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll acara
Peristiwa ini dicetuskan apabila elemen ditatal. Ia biasanya digunakan untuk melaksanakan ciri seperti menatal tanpa had, memuatkan kandungan malas atau mengemas kini elemen UI berdasarkan kedudukan scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus acara
Peristiwa ini dicetuskan apabila elemen menerima focus, biasanya apabila ia diklik atau apabila pengguna menavigasi kepadanya menggunakan papan kekunci. Ia biasanya digunakan untuk melakukan tindakan atau memberikan maklum balas visual apabila sesuatu input atau elemen mendapat keuntungan focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Ini hanyalah beberapa contoh asas acara dalam Vue.js. Anda boleh menyesuaikan fungsi pengendalian acara agar sesuai dengan keperluan khusus projek anda.