Reaktivita ve frameworku Vue

Jakákoli změna dat z data vede k okamžité změně zobrazení těchto dat na stránce. Toto chování Vue se nazývá reaktivita.

Pojďme to ověřit v praxi. Předpokládejme, že máme následující vlastnost:

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

Vypišme hodnotu této vlastnosti:

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

Vytvořme tlačítko, jehož kliknutím se změní naše vlastnost:

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

Nyní napišme metodu, která bude volána při kliknutí na tlačítko a změní vlastnost:

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

Pokud spojíme celý kód dohromady a klikneme na tlačítko - text na obrazovce se reaktivně změní na jiný.

Je dána vlastnost text. Vypište obsah této vlastnosti v nějakém odstavci.

Je dáno tlačítko. Zařiďte, aby kliknutím na toto tlačítko se hodnota vlastnosti text reaktivně změnila na jinou.

Jsou dána dvě tlačítka. Zařiďte, aby kliknutím na první tlačítko se hodnota vlastnosti text reaktivně změnila na jednu hodnotu, a kliknutím na druhou - na jinou.