Рэактыўнасць у фрэймворку 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';
  }
}

Калі сабраць увесь код разам і націснуць на кнопку - тэкст на экране рэактыўна змяніцца на другі.