Gudanar da abubuwan da suka faru wani muhimmin sashi ne na hulɗa tare da masu amfani da canza yanayin aikace-aikacen a cikin Vue.js. Vue.js yana ba da hanyoyi daban-daban don gudanar da abubuwan da suka faru, gami da masu gudanar da taron na layi, hanyoyin, da masu gyara taron.
Ga wasu abubuwan gama gari a cikin Vue.js
1. click aukuwa
Ana kunna wannan taron lokacin da aka danna wani abu mai dannawa, kamar maɓalli ko hanyar haɗin gwiwa. Ana yawan amfani da shi don yin ayyuka ko jawo ayyuka lokacin da mai amfani ke mu'amala da kashi.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input aukuwa
Ana haifar da wannan taron lokacin da darajar wani input abu ya canza. Yawancin lokaci ana amfani da shi tare da v-model umarnin don ɗaure input ƙima zuwa dukiyar bayanai a ɓangaren Vue. Wannan yana ba ku damar sabunta rayayye da bin diddigin canje-canje zuwa ƙimar input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change lamari
Ana haifar da wannan taron lokacin da aka canza ƙimar wani nau'i, kamar zaɓin zaɓuka ko akwati. Ana yawan amfani dashi don aiwatar da ayyuka ko sabunta bayanai dangane da zaɓin zaɓi ko yanayin da aka duba na kashi.
<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 lamari
Ana haifar da wannan taron lokacin da aka ƙaddamar da fom, ko dai ta danna maɓalli submit ko latsa Shigar a cikin input fili. Ana yawan amfani da shi don gudanar da ƙaddamar da fom, inganta mai amfani input, da aiwatar da ayyuka kamar yin buƙatun API ko adana bayanai.
<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 lamari
Ana kunna wannan taron lokacin da aka saki maɓalli bayan an danna ƙasa. Ana yawan amfani da shi don yin ayyuka don mayar da martani ga madannai input, kamar tace jerin abubuwa ko jawo aikin bincike.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown lamari
Ana kunna wannan taron lokacin da aka danna maɓalli. Ana yawan amfani da shi don sauraron takamaiman haɗakar maɓalli ko yin ayyuka yayin da maɓalli ke riƙe ƙasa, kamar kewayawa cikin nunin faifai ko sarrafa wasa.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover lamari
Wannan abin ya faru ne lokacin da aka motsa alamar linzamin kwamfuta akan wani abu. Ana yawan amfani da shi don nuna ƙarin bayani ko bayar da ra'ayin gani yayin shawagi akan wani abu.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout lamari
Wannan abin ya faru ne lokacin da aka fitar da mai nuna linzamin kwamfuta daga wani abu. Ana amfani da shi don ɓoye ko canza abubuwa lokacin da linzamin kwamfuta baya shawagi a kansu.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll lamari
Ana haifar da wannan taron lokacin da aka gungura wani kashi. Ana amfani da shi don aiwatar da fasali kamar gungura mara iyaka, malalacin loda abun ciki, ko sabunta abubuwan UI dangane da matsayi scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus lamari
Ana haifar da wannan taron lokacin da wani abu ya karɓi focus, yawanci lokacin da aka danna shi ko lokacin da mai amfani ya kewaya zuwa gare shi ta amfani da madannai. Ana yawan amfani da shi don yin ayyuka ko bayar da ra'ayin gani lokacin da wani abu input ko kashi ya samu focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Waɗannan wasu misalai ne na asali na abubuwan da suka faru a cikin Vue.js. Kuna iya tsara ayyukan sarrafa taron don dacewa da takamaiman bukatun aikinku.