Reaktivita ve frameworku Vue

Jakákoli změna dat z data vede k okamžité změně zobrazení těchto dat na stránce. Toto chování Vue se nazývá reaktivita.

Pojďme to ověřit v praxi. Předpokládejme, že máme následující vlastnost:

javascriptdata() {
  return {
    text: 'xxx',
  }
}

Vypišme hodnotu této vlastnosti:

App.vue<template>
  {{ text }}
</template>

Vytvořme tlačítko, jehož kliknutím se změní naše vlastnost:

App.vue<template>
  {{ text }}
  <button @click="change">text</button>
</template>

Nyní napišme metodu, která bude volána při kliknutí na tlačítko a změní vlastnost:

App.vuemethods: {
  change: function() {
    this.text = 'yyy';
  }
}

Pokud spojíme celý kód dohromady a klikneme na tlačítko - text na obrazovce se reaktivně změní na jiný.