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 касиетинин мааниси реактивдуу түрдө бир мааниге алмашып, экинчисин чыкылганда - башка мааниге алмашып тургандай кылыңыз.