Zpracování událostí je důležitou součástí interakce s uživateli a změny stavu aplikace ve Vue.js. Vue.js poskytuje různé způsoby zpracování událostí, včetně inline obslužných rutin událostí, metod a modifikátorů událostí.
Zde jsou některé běžné události ve Vue.js
1. click událost
Tato událost se spustí, když se klikne na prvek, na který lze kliknout, jako je tlačítko nebo odkaz. Běžně se používá k provádění akcí nebo spouštěcích funkcí, když uživatel interaguje s prvkem.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input událost
Tato událost se spustí, když se změní hodnota prvku input. Běžně se používá s v-model direktivou k navázání input hodnoty na datovou vlastnost v komponentě Vue. To vám umožní reaktivně aktualizovat a sledovat změny hodnoty input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change událost
Tato událost se spustí, když se změní hodnota prvku formuláře, jako je například rozevírací seznam nebo zaškrtávací políčko. Běžně se používá k provádění akcí nebo aktualizaci dat na základě vybrané možnosti nebo zaškrtnutého stavu prvku.
<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 událost
Tato událost se spustí při odeslání formuláře, buď kliknutím na tlačítko submit nebo stisknutím klávesy Enter uvnitř input pole. Běžně se používá ke zpracování odesílání formulářů, ověřování uživatele input a provádění akcí, jako je vytváření požadavků API nebo ukládání dat.
<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 událost
Tato událost se spustí, když se po stisknutí klávesy uvolní. Běžně se používá k provádění akcí v reakci na klávesnici input, jako je filtrování seznamu položek nebo spouštění funkce vyhledávání.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown událost
Tato událost se spustí při stisknutí klávesy. Běžně se používá k poslechu konkrétních kombinací kláves nebo provádění akcí, když je klávesa stisknuta, jako je procházení prezentace nebo ovládání hry.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover událost
Tato událost se spustí, když se ukazatel myši přesune nad prvek. Běžně se používá k zobrazení dalších informací nebo poskytnutí vizuální zpětné vazby při najetí myší na prvek.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout událost
Tato událost se spustí, když se ukazatel myši přesune mimo prvek. Běžně se používá ke skrytí nebo úpravě prvků, když na ně myš již nedrží.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll událost
Tato událost se spustí, když se prvek posune. Běžně se používá k implementaci funkcí, jako je nekonečné posouvání, líné načítání obsahu nebo aktualizace prvků uživatelského rozhraní na základě pozice scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus událost
Tato událost se spustí, když prvek obdrží focus, obvykle když na něj kliknete nebo když k němu uživatel přejde pomocí klávesnice. Běžně se používá k provádění akcí nebo poskytování vizuální zpětné vazby, když prvek input nebo prvek získá focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Toto jsou jen některé základní příklady událostí ve Vue.js. Funkce zpracování událostí můžete přizpůsobit tak, aby vyhovovaly specifickým potřebám vašeho projektu.