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

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

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

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

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

App.vue<template>
  {{ text }}
</template>

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

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

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

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

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