Az események kezelése fontos része a felhasználókkal való interakciónak és az alkalmazások állapotának megváltoztatásának a Vue.js-ben. A Vue.js különféle módokat biztosít az események kezelésére, beleértve a soron belüli eseménykezelőket, metódusokat és eseménymódosítókat.
Íme néhány gyakori esemény a Vue.js-ben
1. click esemény
Ez az esemény akkor indul el, ha egy kattintható elemre, például gombra vagy hivatkozásra kattintanak. Általában műveletek végrehajtására vagy funkciók aktiválására használják, amikor a felhasználó interakcióba lép az elemmel.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input esemény
Ez az esemény akkor indul el, amikor egy elem értéke input megváltozik. Általában az direktívával együtt használják az érték egy adattulajdonsághoz való v-model kötésére a Vue összetevőjében. input Ez lehetővé teszi az érték reaktív frissítését és nyomon követését input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change esemény
Ez az esemény akkor aktiválódik, amikor egy űrlapelem, például egy kijelölés legördülő menü vagy jelölőnégyzet értéke megváltozik. Általában műveletek végrehajtására vagy adatok frissítésére használják a kiválasztott opció vagy az elem ellenőrzött állapota alapján.
<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 esemény
Ez az esemény akkor indul el, amikor egy űrlapot elküldenek, akár egy submit gombra kattintással, akár az Enter billentyű lenyomásával egy input mezőben. Általában űrlapbeküldések kezelésére, felhasználó ellenőrzésére input és olyan műveletek végrehajtására használják, mint például API-kérések vagy adatok mentése.
<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 esemény
Ez az esemény akkor indul el, amikor egy billentyűt lenyomás után elengednek. Általában a billentyűzetre reagáló műveletek végrehajtására használják input, például elemlista szűrésére vagy keresési funkció elindítására.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown esemény
Ez az esemény egy billentyű lenyomásakor indul el. Általában bizonyos billentyűkombinációk figyelésére vagy műveletek végrehajtására használják, miközben lenyomva tartják a billentyűt, például a diavetítésen való navigáláshoz vagy a játék vezérléséhez.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover esemény
Ez az esemény akkor indul el, ha az egérmutatót egy elem fölé viszi. Általában további információk megjelenítésére vagy vizuális visszajelzésre használják, amikor az egérmutatót egy elem fölé viszi.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout esemény
Ez az esemény akkor indul el, amikor az egérmutatót kimozdítják egy elemből. Általában az elemek elrejtésére vagy módosítására használják, amikor az egér már nincs felettük.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll esemény
Ez az esemény akkor indul el, amikor egy elemet görgetünk. Általában olyan funkciók megvalósítására használják, mint a végtelen görgetés, a tartalom lusta betöltése vagy a felhasználói felület elemeinek frissítése a scroll pozíció alapján.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus esemény
Ez az esemény akkor aktiválódik, amikor egy elem megkapja a jelet focus, általában akkor, amikor rákattint, vagy amikor a felhasználó a billentyűzet segítségével navigál hozzá. Általában műveletek végrehajtására vagy vizuális visszacsatolásra használják, amikor egy input vagy elem erősödik focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Ez csak néhány alapvető példa a Vue.js eseményeire. Testreszabhatja az eseménykezelési funkciókat, hogy megfeleljenek projektje speciális igényeinek.