Kushughulikia matukio ni sehemu muhimu ya kuingiliana na watumiaji na kubadilisha hali ya programu katika Vue.js. Vue.js hutoa njia mbalimbali za kushughulikia matukio, ikiwa ni pamoja na vidhibiti vya matukio ya ndani, mbinu na virekebishaji matukio.
Haya hapa ni baadhi ya matukio ya kawaida katika Vue.js
1. click tukio
Tukio hili huanzishwa wakati kipengele kinachoweza kubofya, kama vile kitufe au kiungo, kinapobofya. Kwa kawaida hutumiwa kutekeleza vitendo au kuanzisha vitendaji wakati mtumiaji anaingiliana na kipengele.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input tukio
Tukio hili huanzishwa wakati thamani ya input kipengele inabadilika. Hutumiwa kwa kawaida pamoja na v-model maagizo kusainisha input thamani kwa kipengele cha data katika kipengele cha Vue. Hii hukuruhusu kusasisha na kufuatilia mabadiliko kwa input thamani.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change tukio
Tukio hili huanzishwa wakati thamani ya kipengele cha fomu, kama vile menyu kunjuzi iliyochaguliwa au kisanduku cha kuteua, inapobadilishwa. Kwa kawaida hutumiwa kufanya vitendo au kusasisha data kulingana na chaguo lililochaguliwa au hali iliyochaguliwa ya kipengele.
<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 tukio
Tukio hili huanzishwa wakati fomu inapowasilishwa, ama kwa kubofya kitufe submit au kubonyeza Enter ndani ya input uga. Kwa kawaida hutumiwa kushughulikia mawasilisho ya fomu, kuthibitisha mtumiaji input, na kutekeleza vitendo kama vile kufanya maombi ya API au kuhifadhi 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 tukio
Tukio hili huanzishwa wakati ufunguo unapotolewa baada ya kubonyezwa chini. Kwa kawaida hutumiwa kutekeleza vitendo kulingana na kibodi input, kama vile kuchuja orodha ya vipengee au kuanzisha utendakazi wa utafutaji.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown tukio
Tukio hili huanzishwa wakati ufunguo unapobonyezwa chini. Kwa kawaida hutumiwa kusikiliza michanganyiko mahususi ya funguo au kutekeleza vitendo wakati ufunguo umeshikiliwa, kama vile kuvinjari onyesho la slaidi au kudhibiti mchezo.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover tukio
Tukio hili linaanzishwa wakati kielekezi cha kipanya kinaposogezwa juu ya kipengele. Kwa kawaida hutumiwa kuonyesha maelezo ya ziada au kutoa maoni yanayoonekana wakati wa kuelea juu ya kipengele.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout tukio
Tukio hili linaanzishwa wakati kielekezi cha kipanya kinapohamishwa kutoka kwa kipengele. Kwa kawaida hutumiwa kuficha au kurekebisha vipengele wakati kipanya haielei juu yao tena.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll tukio
Tukio hili huanzishwa wakati kipengele kinaposogezwa. Kwa kawaida hutumiwa kutekeleza vipengele kama vile kusogeza bila kikomo, upakiaji wa uvivu wa maudhui, au kusasisha vipengele vya UI kulingana na nafasi scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus tukio
Tukio hili huanzishwa wakati kipengele kinapopokea focus, kwa kawaida kinapobofya au mtumiaji anapokiendea kwa kutumia kibodi. Kwa kawaida hutumiwa kutekeleza vitendo au kutoa maoni ya kuona wakati kipengele input au kipengele kinapopata focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Hii ni baadhi tu ya mifano ya kimsingi ya matukio katika Vue.js. Unaweza kubinafsisha vipengele vya kushughulikia tukio ili kutosheleza mahitaji mahususi ya mradi wako.