Реактивност у Vue.js оквиру

Било која промена података из 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';
  }
}

Ако саставимо цео код и притиснемо дугме - текст на екрану ће се реактивно променити у други.