Reaktiivsus Vue raamistikus

Iga muutus andmetes data-st põhjustab nende andmete kuvatava väärtuse lehel kohese muutumise. Sellist Vue käitumist nimetatakse reaktiivsuseks.

Kontrollime seda praktikas. Olgu meil järgmine omadus:

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

Kuvame selle omaduse väärtuse:

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

Teeme nupu, mille vajutamisel meie omadus muutub:

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

Kirjutame nüüd meetodi, mida kutsutakse välja nupu vajutamisel ja mis muudab omadust:

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

Kui panna kogu kood kokku ja vajutada nupule - muutub ekraanil olev tekst reaktiivselt teiseks.