Gestionarea evenimentelor este o parte importantă a interacțiunii cu utilizatorii și a schimbării stării unei aplicații în Vue.js. Vue.js oferă diverse modalități de a gestiona evenimente, inclusiv handlere de evenimente inline, metode și modificatori de evenimente.
Iată câteva evenimente comune în Vue.js
1. click eveniment
Acest eveniment este declanșat atunci când se face clic pe un element pe care se poate face clic, cum ar fi un buton sau un link. Este folosit în mod obișnuit pentru a efectua acțiuni sau declanșa funcții atunci când un utilizator interacționează cu elementul.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input eveniment
Acest eveniment este declanșat atunci când valoarea unui input element se modifică. Este folosit în mod obișnuit împreună cu v-model directiva pentru a lega input valoarea la o proprietate a datelor din componenta Vue. Acest lucru vă permite să actualizați în mod reactiv și să urmăriți modificările aduse valorii input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change eveniment
Acest eveniment este declanșat atunci când valoarea unui element de formular, cum ar fi un meniu vertical sau o casetă de selectare, este modificată. Este folosit în mod obișnuit pentru a efectua acțiuni sau actualiza date pe baza opțiunii selectate sau a stării verificate a elementului.
<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 eveniment
Acest eveniment este declanșat atunci când un formular este trimis, fie făcând clic pe un submit buton, fie apăsând Enter în interiorul unui input câmp. Este folosit în mod obișnuit pentru a gestiona trimiterile de formulare, pentru a valida utilizatorul input și pentru a efectua acțiuni precum efectuarea de solicitări API sau salvarea datelor.
<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 eveniment
Acest eveniment este declanșat atunci când o tastă este eliberată după ce a fost apăsată. Este folosit în mod obișnuit pentru a efectua acțiuni ca răspuns la tastatură input, cum ar fi filtrarea unei liste de articole sau declanșarea unei funcționalități de căutare.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown eveniment
Acest eveniment este declanșat atunci când o tastă este apăsată. Este folosit în mod obișnuit pentru a asculta anumite combinații de taste sau pentru a efectua acțiuni în timp ce o tastă este apăsată, cum ar fi navigarea printr-o prezentare de diapozitive sau controlul unui joc.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover eveniment
Acest eveniment este declanșat atunci când cursorul mouse-ului este mutat peste un element. Este folosit în mod obișnuit pentru a afișa informații suplimentare sau pentru a oferi feedback vizual atunci când treceți cu mouse-ul peste un element.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout eveniment
Acest eveniment este declanșat atunci când indicatorul mouse-ului este mutat dintr-un element. Este folosit în mod obișnuit pentru a ascunde sau modifica elemente atunci când mouse-ul nu mai trece cu mouse-ul peste ele.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll eveniment
Acest eveniment este declanșat atunci când un element este derulat. Este folosit în mod obișnuit pentru a implementa funcții precum defilarea infinită, încărcarea leneșă a conținutului sau actualizarea elementelor UI în funcție de poziție scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus eveniment
Acest eveniment este declanșat atunci când un element primește focus, de obicei când este făcut clic pe acesta sau când utilizatorul navighează la el folosind tastatura. Este folosit în mod obișnuit pentru a efectua acțiuni sau pentru a oferi feedback vizual atunci când un element input sau un element câștigă focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Acestea sunt doar câteva exemple de bază de evenimente în Vue.js. Puteți personaliza funcțiile de gestionare a evenimentelor pentru a se potrivi nevoilor specifice ale proiectului dumneavoastră.