L-immaniġġjar tal-avvenimenti huwa parti importanti mill-interazzjoni mal-utenti u l-bidla tal-istat ta 'applikazzjoni f'Vue.js. Vue.js jipprovdi diversi modi kif timmaniġġja l-avvenimenti, inklużi l-immaniġġjar tal-avvenimenti inline, metodi, u modifikaturi tal-avvenimenti.
Hawn huma xi avvenimenti komuni f'Vue.js
1. click avveniment
Dan l-avveniment jiġi attivat meta jiġi kklikkjat element li jista' jiġi kklikkjat, bħal buttuna jew link. Huwa komunement użat biex iwettaq azzjonijiet jew iqanqal funzjonijiet meta utent jinteraġixxi mal-element.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input avveniment
Dan l-avveniment jiġi attivat meta l-valur ta ' input element jinbidel. Huwa komunement użat mad- v-model direttiva biex jorbot il- input valur ma 'proprjetà tad-dejta fil-komponent ta' Vue. Dan jippermettilek taġġorna b'mod reattiv u ssegwi l-bidliet fil- input valur.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change avveniment
Dan l-avveniment jiġi attivat meta l-valur ta’ element tal-formola, bħal dropdown jew checkbox magħżul, jinbidel. Huwa komunement użat biex iwettaq azzjonijiet jew taġġorna d-dejta bbażata fuq l-għażla magħżula jew l-istat ikkontrollat tal-element.
<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 avveniment
Dan l-avveniment jiġi attivat meta tiġi sottomessa formola, jew billi tikklikkja buttuna submit jew tagħfas Enter ġewwa input qasam. Huwa komunement użat biex jimmaniġġja s-sottomissjonijiet tal-formoli, jivvalida l-utent input, u jwettaq azzjonijiet bħal tagħmel talbiet għall-API jew iffrankar tad-dejta.
<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 avveniment
Dan l-avveniment jiġi attivat meta ċavetta tiġi rilaxxata wara li tiġi ppressata 'l isfel. Huwa komunement użat biex iwettaq azzjonijiet bi tweġiba għat-tastiera input, bħall-iffiltrar ta 'lista ta' oġġetti jew li tiskatta funzjonalità ta 'tfittxija.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown avveniment
Dan l-avveniment jiġi attivat meta ċavetta tiġi ppressata 'l isfel. Huwa komunement użat biex jisma' għal kombinazzjonijiet ta 'ċwievet speċifiċi jew iwettaq azzjonijiet waqt li ċavetta tinżamm 'l isfel, bħan-navigazzjoni permezz ta' preżentazzjoni jew il-kontroll ta 'logħba.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover avveniment
Dan l-avveniment jiġi attivat meta l-pointer tal-maws jitmexxa fuq element. Huwa komunement użat biex juri informazzjoni addizzjonali jew jipprovdi feedback viżwali meta tgħaddi fuq element.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout avveniment
Dan l-avveniment jiġi attivat meta l-pointer tal-maws jitmexxa 'l barra minn element. Huwa komunement użat biex jaħbi jew jimmodifika elementi meta l-maws ma jibqax idawwar fuqhom.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll avveniment
Dan l-avveniment jiġi attivat meta element jiġi skrolljat. Huwa komunement użat biex jimplimenta karatteristiċi bħal scrolling infinit, tagħbija għażżien tal-kontenut, jew aġġornament ta 'elementi UI bbażati fuq il- scroll pożizzjoni.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus avveniment
Dan l-avveniment jiġi attivat meta element jirċievi focus, tipikament meta jiġi kklikkjat jew meta l-utent jinnaviga lejh billi juża t-tastiera. Huwa komunement użat biex iwettaq azzjonijiet jew jipprovdi feedback viżwali meta gwadann input jew element focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Dawn huma biss xi eżempji bażiċi ta’ avvenimenti f’Vue.js. Tista' tippersonalizza l-funzjonijiet tal-immaniġġjar tal-avvenimenti biex taqdi l-ħtiġijiet speċifiċi tal-proġett tiegħek.