6. diel - Udalosti vo Vue.js

V minulej lekcii, Computed properties a dynamické štýly vo Vue.js , sme sa zoznámili s tzv. Computed properties a naučili sme sa dynamicky stylovať komponenty a HTML elementy.

Dnes sa pozrieme na udalosti vo Vue a ukážeme si direktívu v-on.

Udalosti vo Vue

Väčšina JavaScriptových aplikácií vyžaduje interakciu s užívateľom, potrebuje teda pracovať s udalosťami. V čistom JavaScriptu nastavujeme event Listener, Vue nám v tomto smere zjednodušuje prácu direktívou v-on.

Direktíva v-on

Pomocou direktívy v-on nastavujeme na elementu alebo priamo na komponente listener na danú udalosť. Fungovanie tejto direktívy si vysvetlíme na príklade:

<template>
  <div v-on:click="greetingIsCau = !greetingIsCau">{{ greeting }}</div>
</template>
<script>
export default {
  name: 'Greetings',
  data () {
    return {
      greetingIsCau: false
    }
  },
  computed: {
    greeting () {
      return this.greetingIsCau ? 'čau' : 'ahoj'
    }
  }
}
</script>

Komponent vyššie


 

...koniec náhľadu článku...
Pokračuj ďalej

Vedomosti v hodnote stoviek tisíc získaš za pár eur

Došiel si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiovej sekcie.

Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš s Prevádzkovými podmienkami.

Čo od nás v ďalších lekciách dostaneš?
  • Prístup k jednotlivým lekciám podľa spôsobu obstarania.
  • Kvalitné znalosti v oblasti IT.
  • Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.

Popis článku

Požadovaný článok má nasledujúci obsah:

Natívne aj užívateľské udalosti vo Vue, direktíva v-on, emitovanie udalostí pomocou this. $ emit, metódy v konfiguračnom objektu komponentu
Článok pre vás napísal Tomáš Glabazňa
Avatar
Aktivity