Vue Framework'ında Reactive Olma

data içindeki herhangi bir verinin değişmesi, bu verilerin sayfadaki görüntüsünün anında değişmesine neden olur. Vue'un bu davranışına reactive olma denir.

Pratikte test edelim. Aşağıdaki özelliğe sahip olduğumuzu varsayalım:

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

Bu özelliğin değerini ekrana yazdıralım:

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

Üzerine tıklandığında özelliğimizi değiştirecek bir buton yapalım:

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

Şimdi butona tıklandığında çağrılacak ve özelliği değiştirecek metodu yazalım:

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

Tüm kodu bir araya getirir ve butona basarsanız - ekrandaki yazı reactive bir şekilde diğerine değişecektir.

text özelliği verildi. Bu özelliğin içeriğini herhangi bir paragrafta görüntüleyin.

Bir buton verildi. Bu butona tıklandığında text özelliğinin değerinin reactive bir şekilde başka bir değere değişmesini sağlayın.

İki buton verildi. İlk butona tıklandığında text özelliğinin değerinin reactive bir şekilde bir değere, ikinci butona tıklandığında ise başka bir değere değişmesini sağlayın.