Reaktivitet i Vue-rammeverket

Enhver endring av data fra data fører til en umiddelbar endring i visningen av disse dataene på siden. Denne oppførselen til Vue kalles reaktivitet.

La oss teste dette i praksis. Anta at vi har følgende egenskap:

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

La oss vise verdien av denne egenskapen:

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

La oss lage en knapp som, når den klikkes på, vil endre vår egenskap:

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

La oss nå skrive en metode som vil blir kalt ved klikk på knappen og endre egenskapen:

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

Hvis du setter sammen all koden og trykker på knappen - vil teksten på skjermen reaktivt endres til en annen.