Reaktivitet i Vue-ramverket

All förändring av data från data leder till en omedelbar förändring av visningen av denna data på sidan. Detta beteende i Vue kallas reaktivitet.

Låt oss testa detta i praktiken. Antag att vi har följande egenskap:

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

Låt oss visa värdet på denna egenskap:

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

Låt oss skapa en knapp som, när man klickar på den, kommer att ändra vår egenskap:

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

Låt oss nu skriva en metod som kommer att anropas vid klick på knappen och ändra egenskapen:

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

Om man samlar all kod tillsammans och klickar på knappen - kommer texten på skärmen reaktivt att ändras till en annan.

Given egenskapen text. Visa innehållet i denna egenskap i ett stycke.

Given en knapp. Gör så att vid klick på denna knapp ändras värdet på egenskapen text reaktivt till ett annat.

Given två knappar. Gör så att vid klick på den första knappen ändras värdet på egenskapen text reaktivt till ett värde, och vid klick på den andra - till ett annat.