Vue freymvorkida Reaktivlik

data dagi har qanday ma'lumot o'zgarishi sahifadagi ushbu ma'lumotlarning ko'rinishining zudlik bilan o'zgarishiga olib keladi. Vue-ning bu xatti-harakati reaktivlik deb ataladi.

Keling, amaliyotda tekshiramiz. Bizda quyidagi xususiyat mavjud bo'lsin:

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

Ushbu xususiyatning qiymatini chiqaramiz:

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

Bosilganda bizning xususiyatimizni o'zgartiradigan tugma yaratamiz:

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

Endi tugma bosilganda chaqiriladigan va xususiyatni o'zgartiradigan metodni yozamiz:

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

Agar barcha kodni birlashtirsak va tugmani bossak - ekrandagi matn reaktiv ravishda boshqasiga o'zgaradi.

text xususiyati berilgan. Ushbu xususiyatning tarkibini biron bir abzatsda chiqaring.

Tugma berilgan. Ushbu tugma bosilganda text xususiyatining qiymati reaktiv ravishda boshqasiga o'zgarishi uchun qiling.

Ikkita tugma berilgan. Birinchi tugma bosilganda text xususiyatining qiymati reaktiv ravishda bir qiymatga, ikkinchisi bosilganda esa boshqasiga o'zgarishi uchun qiling.