Reaktiivisuus Vue-frameworkissa

Mikä tahansa muutos data:ssa johtaa välittömään muutoksen näiden tietojen näyttämisessä sivulla. Tätä Vue:n käyttäytymistä kutsutaan reaktiivisuudeksi.

Testataan käytännössä. Oletetaan, että meillä on seuraava ominaisuus:

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

Esitetään tämän ominaisuuden arvo:

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

Tehdään painike, jota painamalla ominaisuutemme muuttuu:

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

Kirjoitetaan nyt metodi, jota kutsutaan kun painiketta klikataan ja joka muuttaa ominaisuutta:

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

Jos koko koodi kootaan ja painiketta painetaan - teksti näytöllä reaktiivisesti vaihtuu toiseksi.

Annettu ominaisuus text. Esitä tämän ominaisuuden sisältö jossain kappaleessa.

Annettu painike. Tee niin, että klikkaamalla tätä painiketta text-ominaisuuden arvo muuttuu reaktiivisesti toiseksi.

Annettu kaksi painiketta. Tee niin, että klikkaamalla ensimmäistä painiketta text-ominaisuuden arvo muuttuu reaktiivisesti yhdeksi arvoksi, ja klikkaamalla toista - toiseksi.