Reaktyvumas Vue framework'e

Bet koks pakeitimas duomenyse iš data sukelia momentinį tų duomenų atvaizdo pakeitimą puslapyje. Toks Vue elgesys vadinamas reaktyvumu.

Patikrinkime praktiškai. Tarkime, kad turime šią savybę:

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

Išveskime šios savybės reikšmę:

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

Sukurkime mygtuką, kurį paspaudus bus keičiama mūsų savybė:

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

Dabar parašykime metodą, kuris bus iškviečiamas paspaudus mygtuką ir pakeis savybę:

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

Jei sujungsime visą kodą ir paspausime mygtuką - tekstas ekrane reaktyviai pakis į kitą.

Duota savybė text. Išveskite jos turinį kokiame nors paragrafe.

Duotas mygtukas. Padarykite taip, kad paspaudus šį mygtuką savybės text reikšmė reaktyviai pasikeistų į kitą.

Duoti du mygtukai. Padarykite taip, kad paspaudus pirmą mygtuką savybės text reikšmė reaktyviai pasikeistų į vieną reikšmę, o paspaudus antrą - į kitą.