Vue.js poskytuje bohatou sadu nástrojů pro zpracování událostí a zjednodušení interakcí uživatele v webových aplikacích. Kombinací zpracování událostí, modifikátorů a direktiv umožňuje Vue vývojářům vytvářet vysoce responzivní a interaktivní uživatelská rozhraní.
Zpracování událostí ve Vue.js
Zpracování událostí je základní součástí tvorby dynamických aplikací. Vue používá direktivu v-on (nebo její zkratku @) pro naslouchání DOM událostem.
Příklad: Aktualizace jména
Zde je jednoduchý příklad, jak použít direktivu v-on k aktualizaci jména:
<button v-on:click="updateName" type="button">Klikni na mě</button>
Funkce updateName mění reaktivní proměnnou name:
const name = ref('Tomas');
function updateName() {
name.value = 'Steve';
}
Předávání argumentů do obslužných funkcí
Někdy budete chtít předat vlastní argumenty do obslužných funkcí. Pokud to uděláte, Vue odstraní přímý přístup k výchozímu objektu události. Pro jeho zahrnutí jej musíte předat explicitně jako druhý argument.
Příklad: Předávání jména a události
<button v-on:click="updateName('Steve', $event)" type="button">Klikni na mě</button>
const name = ref('Tomas');
function updateName(newName, event) {
console.log(event); // Zaloguje objekt události
name.value = newName;
}
Použití modifikátorů událostí
Vue nabízí modifikátory událostí, které zjednodušují zpracování běžných chování událostí. Modifikátory se přidávají k posluchačům událostí pomocí tečky (.). Umožňují například zabránit výchozím akcím, zastavit propagaci a další.
Příklad: Modifikátor pro pravé tlačítko myši
Vue umožňuje zpracovat specifické události myši, jako je kliknutí pravým tlačítkem, pomocí .right:
<button v-on:click.right="updateName('Pepa', $event)" type="button">Klikni na mě</button>
Funkce updateName se nyní spustí pouze při kliknutí pravým tlačítkem myši.
Zabránění výchozímu chování
Formuláře ve webových aplikacích často odesílají data a znovu načítají stránku jako výchozí chování. S Vue můžete tomuto chování zabránit pomocí modifikátoru .prevent.
Klasická metoda v JavaScriptu
function handleForm(event) {
event.preventDefault();
console.log('Formulář odeslán');
}
Použití modifikátoru .prevent
Vue tento proces zjednodušuje. Namísto ručního volání event.preventDefault() použijte .prevent:
<form v-on:submit.prevent="handleForm">
<input type="text">
<button>Odeslat</button>
</form>
Tím se zajistí, že se stránka při odeslání formuláře nenačte znovu, zatímco funkce handleForm zpracuje data formuláře.
Komplexní příklad
Zde je kompletní příklad kombinující diskutované koncepty:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.box {
background: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<h1>{{ name }}</h1>
<button v-on:click.right="updateName('Pepa', $event)" type="button">Click me</button>
<hr>
<form v-on:submit.prevent="handleForm">
<input type="text">
<button>Submit</button>
</form>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const name = ref('Tomas');
function updateName(newName, event) {
console.log(event);
name.value = newName;
}
function handleForm() {
console.log('Form submitted');
}
return { name, updateName, handleForm };
},
}).mount("#app");
</script>
</body>
</html>
Video
Nerad čteš, tak mrkni na video 👇
Play