Reaktivitāte Vue framwork

Jebkuras izmaiņas datos no data uzreiz izraisa šo datu attēlojuma izmaiņas lapā. Šādu Vue uzvedību sauc par reaktivitāti.

Pārbaudīsim to praksē. Pieņemsim, ka mums ir šāda īpašība:

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

Parādīsim šīs īpašības vērtību:

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

Izveidosim pogu, kuras nospiešana mainīs mūsu īpašību:

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

Tagad uzrakstīsim metodi, kas tiks izsaukta, noklikšķinot uz pogas, un mainīs īpašību:

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

Ja apvienot visu kodu kopā un nospiest uz pogas - teksts ekrānā reaktīvi mainīsies uz citu.

Dota īpašība text. Parādiet šīs īpašības saturu kādā rindkopā.

Dota poga. Iestatiet tā, lai, noklikšķinot uz šīs pogas, īpašības text vērtība reaktīvi mainītos uz citu.

Dotas divas pogas. Iestatiet tā, lai, noklikšķinot uz pirmās pogas, īpašības text vērtība reaktīvi mainītos uz vienu vērtību, bet, noklikšķinot uz otrās - uz citu.