Vue framework-indaky reaktivlik

data-dan gelýän maglumatlaryň islendik üýtgemesi sahypada şol maglumatlaryň görkezilişiniň derrew üýtgemegine getirýär. Vue framework-iň şeýle hereketi reaktivlik diýilýär.

Geliň praktikada barlap göreli. Aşakdaky aýratynlyk bizde bar bolsun:

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

Bu aýratynlygyň bahasyny görkezeliň:

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

Basanda biziň aýratynlygymyzyň üýtjek düwmesini düzeliň:

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

Indi düwmä basylanda çagyrylar we aýratynlygy üýtderer metodu ýazalyň:

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

Kodlaryň hemmesini bir ýere ýygýan we düwmä bassanyňyz - ekrandaky tekst reaktiv suratda beýleki birine üýtgerer.

text aýratynlygy berlen. Bu aýratynlygyň mazmunyny islendik abzasda görkeziň.

Düwme berlen. Şu düwmä basylanda text aýratynlygynyň bahasy reaktiv suratda başga bir baha üýtgetmek üçin ediň.

Iki sany düwme berlen. Birinji düwmä basylanda text aýratynlygynyň bahasy reaktiv suratda bir baha üýtgetmek, ikkinji düwmä basylanda bolsa başga bir baha üýtgetmek üçin ediň.