Reactivitatea în framework-ul Vue

Orice modificare a datelor din data duce la o modificare instantanee a afișării acestor date pe pagină. Acest comportament al Vue se numește reactivitate.

Să verificăm în practică. Să presupunem că avem următoarea proprietate:

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

Să afișăm valoarea acestei proprietăți:

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

Să creăm un buton, la click pe care se va schimba proprietatea noastră:

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

Să scriem acum metoda care va fi apelată la click pe buton și va modifica proprietatea:

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

Dacă adunăm tot codul împreună și apăsăm pe buton - textul de pe ecran se va schimba reactiv în altul.

Este dată proprietatea text. Afișați conținutul acestei proprietăți într-un paragraf.

Este dat un buton. Faceți ca la click pe acest buton valoarea proprietății text să se schimbe reactiv în alta.

Sunt date două butoane. Faceți ca la click pe primul buton valoarea proprietății text să se schimbe reactiv într-o valoare, iar la click pe al doilea - în alta.