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