Reaktivitás a Vue keretrendszerben

A data bármely módosítása azonnali változáshoz vezet ezen adatok oldalon történő megjelenítésében. Ezt a Vue viselkedését reaktivitásnak nevezzük.

Próbáljuk ki a gyakorlatban. Tegyük fel, hogy a következő tulajdonsággal rendelkezünk:

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

Jelenítsük meg a tulajdonság értékét:

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

Készítsünk egy gombot, amelyre kattintva a tulajdonságunk megváltozik:

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

Most írjuk meg a metódust, amelyet a gombra kattintáskor hívunk meg és módosítja a tulajdonságot:

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

Ha az összes kódot összerakjuk és rákattintunk a gombra - a képernyőn lévő szöveg reaktívan átvált egy másikra.