Trajtimi i ngjarjeve është një pjesë e rëndësishme e ndërveprimit me përdoruesit dhe ndryshimit të gjendjes së një aplikacioni në Vue.js. Vue.js ofron mënyra të ndryshme për të trajtuar ngjarjet, duke përfshirë mbajtësit e ngjarjeve në linjë, metodat dhe modifikuesit e ngjarjeve.
Këtu janë disa ngjarje të zakonshme në Vue.js
1. click ngjarje
Kjo ngjarje aktivizohet kur klikohet një element i klikueshëm, si p.sh. një buton ose një lidhje. Zakonisht përdoret për të kryer veprime ose për të aktivizuar funksionet kur një përdorues ndërvepron me elementin.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input ngjarje
Kjo ngjarje aktivizohet kur input ndryshon vlera e një elementi. Zakonisht përdoret me v-model direktivën për të lidhur input vlerën me një pronë të të dhënave në komponentin e Vue. Kjo ju lejon të përditësoni në mënyrë reaktive dhe të gjurmoni ndryshimet në input vlerë.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change ngjarje
Kjo ngjarje aktivizohet kur ndryshohet vlera e një elementi të formës, si p.sh. një listë rënëse ose kuti e zgjedhjes. Zakonisht përdoret për të kryer veprime ose për të përditësuar të dhënat bazuar në opsionin e zgjedhur ose gjendjen e kontrolluar të elementit.
<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 ngjarje
Kjo ngjarje aktivizohet kur një formular dorëzohet, ose duke klikuar një submit buton ose duke shtypur Enter brenda një input fushe. Zakonisht përdoret për të trajtuar paraqitjet e formularëve, për të vërtetuar përdoruesin input dhe për të kryer veprime të tilla si bërja e kërkesave API ose ruajtja e të dhënave.
<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 ngjarje
Kjo ngjarje aktivizohet kur një tast lëshohet pasi është shtypur. Zakonisht përdoret për të kryer veprime në përgjigje të tastierës input, të tilla si filtrimi i një liste artikujsh ose aktivizimi i një funksioni kërkimi.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown ngjarje
Kjo ngjarje aktivizohet kur shtypet një tast. Zakonisht përdoret për të dëgjuar kombinime të veçanta të tasteve ose për të kryer veprime ndërsa një tast është i mbajtur të shtypur, si p.sh. lundrimi nëpër një shfaqje rrëshqitëse ose kontrollimi i një loje.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover ngjarje
Kjo ngjarje aktivizohet kur treguesi i miut zhvendoset mbi një element. Zakonisht përdoret për të treguar informacion shtesë ose për të dhënë reagime vizuale kur rri pezull mbi një element.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout ngjarje
Kjo ngjarje aktivizohet kur treguesi i miut zhvendoset nga një element. Zakonisht përdoret për të fshehur ose modifikuar elementë kur miu nuk qëndron më mbi to.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll ngjarje
Kjo ngjarje aktivizohet kur një element lëviz. Zakonisht përdoret për të zbatuar veçori të tilla si lëvizja e pafund, ngarkimi dembel i përmbajtjes ose përditësimi i elementeve të UI bazuar në pozicionin scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus ngjarje
Kjo ngjarje aktivizohet kur një element merr focus, zakonisht kur klikohet ose kur përdoruesi lundron drejt tij duke përdorur tastierën. Zakonisht përdoret për të kryer veprime ose për të dhënë reagime vizuale kur një input ose element fiton focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Këta janë vetëm disa shembuj bazë të ngjarjeve në Vue.js. Ju mund të personalizoni funksionet e trajtimit të ngjarjeve për t'iu përshtatur nevojave specifike të projektit tuaj.