Lekce 6 - Události ve Vue

V minulé lekci, Computed properties a dynamické styly ve Vue, jsme se seznámili s tzv. computed properties a naučili jsme se dynamicky stylovat komponenty a HTML elementy.

Dnes se podíváme na události ve Vue a ukážeme si direktivu v-on.

Události ve Vue

Většina JavaScriptových aplikací vyžaduje interakci s uživatelem, potřebuje tedy pracovat s událostmi. V čistém JavaScriptu nastavujeme event listenery, Vue nám v tomto ohledu zjednodušuje práci direktivou v-on.

Direktiva v-on

Pomocí direktivy v-on nastavujeme na elementu nebo přímo na komponentě listener na danou událost. Fungování této direktivy si vysvětlíme na příkladu:

<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>

Komponenta výše

...konec náhledu článku...
Pokračuj dál