Реактивност во Vue рамката

Секоја промена на податоците од data доведува до моментална промена на приказот на тие податоци на страницата. Таквото однесување на Vue се нарекува реактивност.

Ајде да провериме во пракса. Нека имаме следново својство:

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

Ќе ја прикажеме вредноста на ова својство:

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

Да направиме копче, при кликнување на кое ќе се менува нашето својство:

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

Сега да напишеме метод кој ќе се повикува при клик на копчето и ќе го менува својството:

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

Ако се собере целиот код заедно и се кликне на копчето - текстот на екранот реактивно ќе се смени во друг.