Reaktywność we frameworku Vue

Każda zmiana danych z data prowadzi do natychmiastowej zmiany wyświetlania tych danych na stronie. Takie zachowanie Vue nazywa się reaktywność.

Sprawdźmy to w praktyce. Załóżmy, że mamy następującą właściwość:

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

Wypiszmy wartość tej właściwości:

<template>
	{{ text }}
</template>

Zróbmy przycisk, po kliknięciu którego będzie się zmieniać nasza właściwość:

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

Napiszmy teraz metodę, która będzie wywoływana po kliknięciu przycisku i zmieniać właściwość:

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

Jeśli zbierzemy cały kod razem i klikniemy przycisk - tekst na ekranie reaktywnie zmieni się na inny.

Dana jest właściwość text. Wyświetl zawartość tej właściwości w jakimś akapicie.

Dany jest przycisk. Spraw, aby po kliknięciu na ten przycisk wartość właściwości text zmieniała się reaktywnie na inną.

Dane są dwa przyciski. Spraw, aby po kliknięciu na pierwszy przycisk wartość właściwości text zmieniała się reaktywnie na jedną wartość, a po kliknięciu na drugi - na drugą.