Αντίδραση στο πλαίσιο Vue

Οποιαδήποτε αλλαγή στα δεδομένα από το data οδηγεί σε άμεση αλλαγή στην προβολή αυτών των δεδομένων στη σελίδα. Αυτή η συμπεριφορά του Vue ονομάζεται αντίδραση.

Ας δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι έχουμε την ακόλουθη ιδιότητα:

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

Ας εμφανίσουμε την τιμή αυτής της ιδιότητας:

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

Ας φτιάξουμε ένα κουμπί, upon clicking on which θα αλλάξει η ιδιότητά μας:

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

Ας γράψουμε τώρα μια μέθοδο που θα καλείται upon click στο κουμπί και θα αλλάζει την ιδιότητα:

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

Εάν συγκεντρώσετε όλο τον κώδικα μαζί και πατήσετε στο κουμπί - το κείμενο στην οθόνη αντιδραστικά θα αλλάξει σε άλλο.

Δίνεται η ιδιότητα text. Εμφανίστε το περιεχόμενο αυτής της ιδιότητας σε κάποια παράγραφο.

Δίνεται ένα κουμπί. Κάντε έτσι ώστε upon click σε αυτό το κουμπί η τιμή της ιδιότητας text να αλλάζει αντιδραστικά σε άλλη.

Δίνονται δύο κουμπιά. Κάντε έτσι ώστε upon click στο πρώτο κουμπί η τιμή της ιδιότητας text να αλλάζει αντιδραστικά σε μια τιμή, και upon click στο δεύτερο - σε άλλη.