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 хоссасининг қиймати бир қийматга реактив ўзгариши, иккинчи тугма босилганда эса бошқа қийматга ўзгариши учун тартиб тузинг.