Reaktiivisuus Vue-frameworkissa

Mikä tahansa muutos data:ssa johtaa välittömään muutoksen näiden tietojen näyttämisessä sivulla. Tätä Vue:n käyttäytymistä kutsutaan reaktiivisuudeksi.

Testataan käytännössä. Oletetaan, että meillä on seuraava ominaisuus:

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

Esitetään tämän ominaisuuden arvo:

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

Tehdään painike, jota painamalla ominaisuutemme muuttuu:

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

Kirjoitetaan nyt metodi, jota kutsutaan kun painiketta klikataan ja joka muuttaa ominaisuutta:

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

Jos koko koodi kootaan ja painiketta painetaan - teksti näytöllä reaktiivisesti vaihtuu toiseksi.