Reaktivnost v ogrodju Vue

Vsaka sprememba podatkov iz data povzroči takojšnjo spremembo prikaza teh podatkov na strani. Takšno vedenje Vue se imenuje reaktivnost.

Preverimo v praksi. Recimo, da imamo naslednjo lastnost:

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

Izpišimo vrednost te lastnosti:

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

Naredimo gumb, ob kliku na katerega se bo spremenila naša lastnost:

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

Zdaj pa napišimo metodo, ki se bo klicala ob kliku na gumb in spreminjala lastnost:

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

Če združimo celotno kodo in kliknemo na gumb - se bo besedilo na zaslonu reaktivno spremenilo v drugo.