Naučte se, jak zvýšit úroveň zpracování vašich událostí pomocí směrnice Vue v-on.

Poslouchání uživatelských událostí je nedílnou součástí každé responzivní webové aplikace a aplikace Vue nejsou výjimkou. Vue přichází s jednoduchým a efektivním způsobem zpracování událostí pomocí direktivy v-on.

Co je to vázání událostí ve Vue?

Vazba události je funkce Vue.js, která vám umožňuje připojit posluchač události k a Objektový model dokumentu (DOM) živel. Když dojde k události, posluchač události spustí akci nebo odpověď ve vaší aplikaci Vue.

Svázání událostí ve Vue můžete dosáhnout pomocí v-on směrnice. Tato direktiva umožňuje vaší aplikaci naslouchat uživatelským událostem, jako jsou události kliknutí, zadání nebo stisknutí kláves.

Chcete-li připojit posluchač události k prvku pomocí v-on, přidejte název události jako parametr do direktivy:

<html>
<hlava>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlava>
<tělo>
<divid="aplikace">
<knoflíkv-on: klikněte="counter++">Klikni na měknoflík





instagram viewer

>
<p>{{ counter}}p>
div>
<skript>
konst app = Vue.createApp({
 data() {
vrátit se {
 text: "Vue je úžasná!",
 počítadlo: 0
 }
 }
 })
 app.mount('#aplikace')
skript>
tělo>
html>

Blok kódu výše ukazuje příklad aplikace Vue, která poslouchá a klikněte událost. Blok kódu používá a knoflík zvýšit čelit hodnotu ve vlastnosti data instance Vue o jednu.

Výše uvedený blok kódu váže výraz JavaScript čítač++ k tlačítkům klikněte událost s v-on směrnice. Vue používá @ znak jako zkratka na místě v-on směrnice kvůli v-ončasté používání:

<knoflík @klikněte="counter++">Klikni na měknoflík>

Vazba události ve Vue není omezena na události kliknutí. Vue zpracovává další události, jako jsou události stisknutí klávesy, události přejetí myší a další.

Chcete-li spojit kteroukoli z těchto událostí s v-on směrnici, nahradit klikněte událost s názvem požadované události:

<knoflík @keydown.enter="counter++">Klikni na měknoflík>

Výše uvedený kód nastaví posluchač události na knoflík která poslouchá keydown událost. Když je stisknuto jakékoli tlačítko, když je tlačítko zaostřené, Vue vyhodnotí čítač++ výraz.

Ve většině aplikací Vue můžete zvládnout složitější logiku založenou na konkrétních událostech. Události a metody fungují ruku v ruce při provádění akcí aplikace na základě události.

Vlastnost metod v Objekt možností Vue obsahuje důležité funkce, které vaše aplikace Vue potřebuje pro lepší reaktivitu. S vlastností Method ve Vue můžete zpracovávat složitou logiku založenou na událostech.

Zde je příklad aplikace Vue, která zobrazuje události zpracovávané vlastností Method:

<html>
<hlava>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlava>
<tělo>
<divid="aplikace">
<knoflík @klikněte="přírůstek">Přidat 1knoflík>
<knoflík @klikněte="snížit">snížit 1knoflík>
<p>{{ počítadlo }}p>
div>
<skript>
 const app = Vue.createApp({
 data() {
 vrátit se {
 text: 'Vue je úžasné!',
 počítadlo: 0
 }
 },
 metody: {
 přírůstek(){
 toto.počítadlo = toto.počítadlo + 1
 },
 snížit() {
 toto.počítadlo = toto.počítadlo - 1
 }
 }
 })
 app.mount('#app')
skript>
tělo>
html>

Výše uvedená aplikace Vue ukazuje, jak propojit události s metodami. Aplikace má dvě tlačítka, na která mohou uživatelé kliknout a zvýšit nebo snížit hodnotu čítače ve vlastnosti data.

Aplikace toho dosahuje pomocí @klikněte směrnice. The @klikněte direktiva ukazuje na funkce ve vlastnosti metod pro manipulaci s hodnotou čítače.

Při propojování argumentu s událostí kliknutí můžete přizpůsobit metody zvýšení a snížení, abyste přidali nebo snížili hodnotu čítače na základě argumentu, který předáte metodě.

Jako tak:

<tělo>
<divid="aplikace">
<knoflík @klikněte="přírůstek (5)">Přidejte 5knoflík>
<knoflík @klikněte="snížit (3)">snížit 3knoflík>
<p>{{ počítadlo }}p>
div>


<skript>
 const app = Vue.createApp({
 data() {
 vrátit se {
 text: 'Vue je úžasné!',
 počítadlo: 0
 }
 },
 metody: {
 přírůstek (num){
 this.counter = this.counter + num
 },
 snížit (num) {
 this.counter = this.counter - num
 }
 }
 })
 app.mount('#app')
skript>
tělo>

Tento blok kódu se rozšiřuje na předchozí aplikaci Vue a umožňuje předávání argumentů metodám spojeným s posluchačem události kliknutí na tlačítku.

Metody inkrementují a snižují v instanci Vue argument num pro zvýšení nebo snížení vlastnosti čítače.

Tento příklad ukazuje, jak můžete pracovat s argumenty při propojování metod s událostmi ve Vue. Propojení metod s událostmi může pomoci zvýšit interaktivitu aplikací Vue.

Prozkoumání Prevent and Stop Modifiers ve Vue

Modifikátory událostí ve Vue vám umožňují vytvářet lepší posluchače událostí, které uspokojí specifické potřeby vaší aplikace. Chcete-li využít tyto modifikátory událostí, zřetězte modifikátory s událostmi ve Vue.

Například:

<formulář @předložit.zabránit="handleSubmit">
<vstuptyp="text"v-model="text">
<knoflíktyp="Předložit">Předložitknoflík>
formulář>

Blok kódu výše zřetězuje zabránit modifikátor události odeslání. The zabránit modifikátor se běžně používá při práci s formuláři ve Vue.

The zabránit Účelem modifikátoru je zabránit výchozímu chování při odesílání formuláře, což je opětovné načtení stránky. Použitím zabránit, Vue může pokračovat ve svých procesech, zatímco handleSubmit metoda se postará o odeslání formuláře.

Dalším příkladem velmi užitečného modifikátoru je stop modifikátor události. The stop modifikátor události zastaví šíření události dále ve stromu DOM.

Obvykle událost podřízeného prvku HTML probublává stromem DOM a aktivuje všechny posluchače událostí připojené k nadřazeným prvkům. Můžete tomu zabránit propagace události s stop modifikátor a zabránit události ve spouštění dalších posluchačů událostí.

Abyste pochopili, jak stop modifikátor zastaví šíření událostí dále ve stromu DOM, zvažte následující blok kódu:

<tělo>
<divid="aplikace">
<div @klikněte="vnější kliknutí"třída="vnější">
<div @click.stop="innerClick"třída="vnitřní">
<knoflík @klikněte="buttonClick"třída="knoflík">Klikni na měknoflík>
div>
div>
div>
<skript>
 const app = Vue.createApp({
 metody: {
 externalClick() {
 console.log('Vnější kliknutí')
 },
 innerClick() {
 console.log('Vnitřní kliknutí')
 },
 buttonClick() {
 console.log('Kliknutí na tlačítko')
 }
 }
 });
 app.mount("#app");
skript>
tělo>

Blok kódu výše má tři posluchače událostí připojené ke třem různým prvkům. The knoflík prvek je uvnitř div s vnitřní třídy, zatímco div s vnitřní třída je uvnitř div s vnější třída.

Každý ze tří prvků poslouchá a klikněte událost a protokoly do konzole, klikli na název prvku HTML. Níže je uveden další styl CSS třídy, aby byl výše uvedený blok kódu srozumitelnější:

<hlava>
<styl>
 .vnější {
 výplň: 20px;
 barva pozadí: černá;
 }
 .vnitřní {
 výplň: 20px;
 barva pozadí: šedá;
 }
 knoflík {
 odsazení: 10px;
 barva pozadí: bílá;
 ohraničení: 2px plná černá;
 velikost písma: 16px;
 váha písma: tučné;
 kurzor: ukazatel;
 }
styl>
hlava>

Při spuštění programu bude vytvořená aplikace Vue vypadat takto:

Všimněte si, že když kliknete na tlačítko, program zavolá tlačítkoKlikněte a zaprotokoluje zprávu do konzole. Program také volá innerClick metoda.

Program však nevolá vnějšíClick protože blok kódu přidal a stop modifikátor na innerClick posluchač události. To zabrání tomu, aby se událost dále šířila ve stromu DOM.

Bez stop modifikátor, program zavolá tlačítkoKlikněte po klepnutí na tlačítko a událost se bude dále šířit ve stromu a dosáhne innerClick metoda a poté vnějšíClick metoda.

Zpracování událostí ve webových aplikacích

Naučili jste se, jak používat vazbu událostí ve Vue k připojení posluchačů událostí k prvkům a jak volat metody, když nastanou události. Také jste pochopili, jak používat modifikátory událostí k přizpůsobení chování událostí.

Webové aplikace se při provádění funkcí spoléhají na určitou formu uživatelských událostí. JavaScript je dodáván s mnoha metodami pro zachycení a zpracování různých těchto událostí. Tyto události pomáhají při vytváření interaktivních aplikací.