Реактивность в Vue

Любое изменение данных из data приводит к мгновенному изменению отображения этих данных на странице. Такое поведение Vue называется реактивность.

App.vuedata()
{
    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';
    }
}