Įvykių tvarkymas yra svarbi bendravimo su vartotojais ir Vue.js programos būsenos keitimo dalis. Vue.js suteikia įvairių būdų tvarkyti įvykius, įskaitant tiesiogines įvykių tvarkykles, metodus ir įvykių modifikatorius.
Štai keletas bendrų įvykių Vue.js
1. click įvykis
Šis įvykis suaktyvinamas, kai spustelėjamas elementas, pvz., mygtukas arba nuoroda. Jis dažniausiai naudojamas veiksmams atlikti arba funkcijoms suaktyvinti, kai vartotojas sąveikauja su elementu.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input įvykis
Šis įvykis suaktyvinamas, kai pasikeičia elemento vertė input. Jis dažniausiai naudojamas su v-model direktyva, norint susieti input reikšmę su duomenų ypatybe Vue komponente. Tai leidžia reaktyviai atnaujinti ir stebėti vertės pokyčius input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change įvykis
Šis įvykis suaktyvinamas, kai pakeičiama formos elemento vertė, pvz., pasirinkimo išskleidžiamasis meniu arba žymimasis laukelis. Jis dažniausiai naudojamas veiksmams atlikti arba duomenims atnaujinti pagal pasirinktą parinktį arba pažymėtą elemento būseną.
<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 įvykis
Šis įvykis suaktyvinamas, kai pateikiama forma, spustelėjus mygtuką submit arba paspaudus Enter lauke input. Jis dažniausiai naudojamas formų pateikimui tvarkyti, naudotojo patvirtinimui input ir veiksmams, pvz., API užklausoms teikti arba duomenims išsaugoti, atlikti.
<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 įvykis
Šis įvykis suaktyvinamas, kai paspaudus klavišą atleidžiamas. Jis dažniausiai naudojamas norint atlikti veiksmus, reaguojant į klaviatūrą input, pvz., filtruoti elementų sąrašą arba suaktyvinti paieškos funkciją.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown įvykis
Šis įvykis suaktyvinamas, kai paspaudžiamas klavišas. Jis dažniausiai naudojamas klausytis konkrečių klavišų kombinacijų arba atlikti veiksmus, kai klavišas yra nuspaustas, pvz., naršyti skaidrių demonstracijoje arba valdyti žaidimą.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover įvykis
Šis įvykis suaktyvinamas, kai pelės žymeklis perkeliamas virš elemento. Jis dažniausiai naudojamas norint parodyti papildomą informaciją arba pateikti vaizdinį grįžtamąjį ryšį, kai pelės žymeklis yra virš elemento.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout įvykis
Šis įvykis suaktyvinamas, kai pelės žymeklis perkeliamas iš elemento. Jis dažniausiai naudojamas elementams paslėpti arba modifikuoti, kai pelė virš jų nebeslenka.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll įvykis
Šis įvykis suaktyvinamas, kai elementas slenkamas. Jis dažniausiai naudojamas diegti tokias funkcijas kaip begalinis slinkimas, tingus turinio įkėlimas arba vartotojo sąsajos elementų atnaujinimas pagal padėtį scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus įvykis
Šis įvykis suaktyvinamas, kai elementas gauna focus, paprastai jį spustelėjus arba vartotojui naršant prie jo naudojant klaviatūrą. Jis dažniausiai naudojamas veiksmams atlikti arba vaizdiniam grįžtamajam ryšiui teikti, kai elementas input arba elementas padidėja focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Tai tik keli pagrindiniai Vue.js įvykių pavyzdžiai. Galite tinkinti įvykių tvarkymo funkcijas, kad jos atitiktų konkrečius jūsų projekto poreikius.