Vue freymvorkunda Reaktivlik

data-dan olan hər hansı məlumatın dəyişməsi səhifədə bu məlumatların göstəricisinin ani dəyişməsinə səbəb olur. Vue-un bu davranışı reaktivlik adlanır.

Gəlin praktikada yoxlayaq. Tutaq ki, bizim aşağıdakı xassəmiz var:

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

Bu xassənin qiymətini çıxaraq:

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

Kliklədikdə bizim xassəmizi dəyişəcək bir düymə edək:

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

İndi isə düyməyə kliklədikdə çağırılacaq və xassəni dəyişəcək metodu yazaq:

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

Əgər bütün kodu birləşdirsəniz və düyməyə bassanız - ekrandakı mətn reaktiv şəkildə başqasına dəyişəcək.