Reaktivitás a Vue keretrendszerben

A data bármely módosítása azonnali változáshoz vezet ezen adatok oldalon történő megjelenítésében. Ezt a Vue viselkedését reaktivitásnak nevezzük.

Próbáljuk ki a gyakorlatban. Tegyük fel, hogy a következő tulajdonsággal rendelkezünk:

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

Jelenítsük meg a tulajdonság értékét:

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

Készítsünk egy gombot, amelyre kattintva a tulajdonságunk megváltozik:

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

Most írjuk meg a metódust, amelyet a gombra kattintáskor hívunk meg és módosítja a tulajdonságot:

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

Ha az összes kódot összerakjuk és rákattintunk a gombra - a képernyőn lévő szöveg reaktívan átvált egy másikra.

Adott a text tulajdonság. Jelenítse meg a tulajdonság tartalmát egy bekezdésben.

Adott egy gomb. Állítsa be, hogy kattintáskor a text tulajdonság értéke reaktívan módosuljon egy másikra.

Adott két gomb. Állítsa be, hogy az első gombra kattintáskor a text tulajdonság értéke reaktívan módosuljon egy értékre, a másodikra kattintáskor pedig egy másikra.