Vue freymvorkunda Reaktivlik

data-dan olan hər hansı məlumatın dəyişməsi səhifədə bu məlumatların göstəricisinin ani dəyişməsinə səbəb olur. Vue-un bu davranışı reaktivlik adlanır.

Gəlin praktikada yoxlayaq. Tutaq ki, bizim aşağıdakı xassəmiz var:

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

Bu xassənin qiymətini çıxaraq:

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

Kliklədikdə bizim xassəmizi dəyişəcək bir düymə edək:

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

İndi isə düyməyə kliklədikdə çağırılacaq və xassəni dəyişəcək metodu yazaq:

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

Əgər bütün kodu birləşdirsəniz və düyməyə bassanız - ekrandakı mətn reaktiv şəkildə başqasına dəyişəcək.

text xassəsi verilib. Bu xassənin məzmununu istənilən abzasda çıxarın.

Düymə verilib. Elə edin ki, bu düyməyə kliklədikdə text xassəsinin qiyməti reaktiv şəkildə başqasına dəyişilsin.

İki düymə verilib. Elə edin ki, birinci düyməyə kliklədikdə text xassəsinin qiyməti reaktiv şəkildə bir qiymətə dəyişilsin, ikinciyə kliklədikdə isə - başqa bir qiymətə.