Reaktivitet i Vue-frameworket

Enhver ændring af data fra data fører til en øjeblikkelig ændring i visningen af disse data på siden. Denne opførsel kaldes reaktivitet i Vue.

Lad os teste det i praksis. Antag, at vi har følgende egenskab:

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

Lad os udskrive værdien af denne egenskab:

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

Lad os lave en knap, hvor et klik på den vil ændre vores egenskab:

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

Lad os nu skrive en metode, der vil blive kaldt ved klik på knappen og ændre egenskaben:

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

Hvis man samler al koden og klikker på knappen - vil teksten på skærmen reaktivt ændres til en anden.

Der er givet en egenskab text. Udskriv indholdet af denne egenskab i en eller anden paragraf.

Der er givet en knap. Gør så, ved et klik på denne knap ændres værdien af egenskaben text reaktivt til en anden.

Der er givet to knapper. Gør så, ved et klik på den første knap ændres værdien af egenskaben text reaktivt til én værdi, og ved et klik på den anden - til en anden.