Vue фреймворгіндегі реактивтілік

data-тан кез келген деректерді өзгерту беттегі осы деректердің көрінісінің лезде өзгеруіне әкеп соғады. Vue-дың мұндай мінез-құлқы реактивтілік деп аталады.

Практикада тексерейік. Бізде келесі қасиет бар делік:

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

Осы қасиеттің мәнін шығарайық:

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

Басылғанда біздің қасиетіміздің өзгеретін батырманы жасайық:

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

Енді батырма басылғанда шақырылатын және қасиетті өзгертетін әдіс жазайық:

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

Егер барлық кодты жинап, батырманы бассаңыз - экрандағы мәтін реактивті түрде басқаға ауысады.

text қасиеті берілген. Осы қасиеттің мазмұнды кез келген абзацта шығарыңыз.

Батырма берілген. Батырманы басқанда text қасиетінің мәні реактивті түрде басқаға өзгеруін жасаңыз.

Екі батырма берілген. Бірінші батырманы басқанда text қасиетінің мәні реактивті түрде бір мәнге өзгеруін, ал екіншісін басқанда - басқа мәнге өзгеруін жасаңыз.