Reaktivita vo frameworku Vue

Akákoľvek zmena údajov z data vedie k okamžitej zmene zobrazenia týchto údajov na stránke. Takéto správanie Vue sa nazýva reaktivita.

Vyskúšajme si to v praxi. Predpokladajme, že máme nasledujúcu vlastnosť:

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

Vypíšme hodnotu tejto vlastnosti:

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

Vytvorme tlačidlo, pri ktorého kliknutí sa zmení naša vlastnosť:

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

Teraz napíšme metódu, ktorá sa bude volať pri kliknutí na tlačidlo a zmení vlastnosť:

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

Ak spojíme celý kód spolu a klikneme na tlačidlo - text na obrazovke sa reaktívne zmení na iný.