Is cuid thábhachtach d’idirghníomhú le húsáideoirí agus d’athrú ar staid feidhmchláir in Vue.js é imeachtaí a láimhseáil. Soláthraíonn Vue.js bealaí éagsúla chun imeachtaí a láimhseáil, lena n-áirítear láimhseálaithe imeachtaí inlíne, modhanna, agus modhnóirí imeachta.
Seo roinnt imeachtaí coitianta i Vue.js
1. click imeacht
Spreagtar an teagmhas seo nuair a chliceáiltear eilimint inchliceáilte, mar chnaipe nó nasc. Úsáidtear go coitianta é chun gníomhartha nó feidhmeanna a spreagadh nuair a idirghníomhaíonn úsáideoir leis an eilimint.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input imeacht
Spreagtar an teagmhas seo nuair a input athraíonn luach dúile. Úsáidtear go coitianta é leis an v-model treoir chun input luach a cheangal ar airí sonraí i gcomhpháirt Vue. Ligeann sé seo duit athruithe ar an luach a nuashonrú agus a rianú go himoibríoch input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change imeacht
Spreagtar an teagmhas seo nuair a athraítear luach eilimint fhoirme, ar nós anuas roghnaithe nó ticbhosca. Úsáidtear go coitianta é chun gníomhartha a dhéanamh nó chun sonraí a nuashonrú bunaithe ar an rogha roghnaithe nó staid sheiceáil na heiliminte.
<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 imeacht
Spreagtar an teagmhas seo nuair a chuirtear foirm isteach, trí submit chnaipe a chliceáil nó Iontráil a bhrú laistigh de input réimse. Úsáidtear go coitianta é chun aighneachtaí foirme a láimhseáil, úsáideoirí a bhailíochtú input, agus gníomhartha a dhéanamh mar iarratais API a dhéanamh nó sonraí a shábháil.
<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 imeacht
Spreagtar an teagmhas seo nuair a scaoiltear eochair tar éis í a bhrú síos. Úsáidtear go coitianta é chun gníomhartha a dhéanamh mar fhreagra ar mhéarchlár input, mar shampla liosta míreanna a scagadh nó feidhmiúlacht cuardaigh a spreagadh.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown imeacht
Spreagtar an teagmhas seo nuair a bhrúitear eochair síos. Úsáidtear go coitianta é chun éisteacht le comhcheangail sainiúla eochrach nó chun gníomhartha a dhéanamh agus eochair á choinneáil síos, mar shampla dul trí thaispeántas sleamhnán nó cluiche a rialú.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover imeacht
Spreagtar an teagmhas seo nuair a bhogtar an pointeoir luiche thar eilimint. Úsáidtear go coitianta é chun faisnéis bhreise a thaispeáint nó chun aiseolas amhairc a sholáthar agus é ag dul thar eilimint.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout imeacht
Spreagtar an teagmhas seo nuair a bhogtar an pointeoir luiche amach as eilimint. Úsáidtear go coitianta é chun eilimintí a cheilt nó a mhodhnú nuair nach mbíonn an luch ag foluain os a gcionn a thuilleadh.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll imeacht
Spreagtar an teagmhas seo nuair a scrollaítear eilimint. Úsáidtear go coitianta é chun gnéithe cosúil le scrollú gan teorainn, luchtú leisciúil ábhar, nó nuashonrú eilimintí UI bunaithe ar an scroll suíomh a chur i bhfeidhm.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus imeacht
Spreagtar an teagmhas seo nuair a fhaigheann eilimint focus, go hiondúil nuair a chliceáiltear é nó nuair a sheolann an t-úsáideoir chuige ag baint úsáid as an méarchlár. Úsáidtear go coitianta é chun gníomhartha a dhéanamh nó chun aiseolas amhairc a sholáthar nuair a théann gné input nó gné chun cinn focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Níl anseo ach roinnt samplaí bunúsacha d’imeachtaí in Vue.js. Is féidir leat na feidhmeanna láimhseála imeachta a shaincheapadh chun freastal ar riachtanais shonracha do thionscadal.