Kereaktifan dalam Framework Vue

Sebarang perubahan data dari data mengakibatkan perubahan serta-merta paparan data tersebut pada halaman. Tingkah laku Vue ini dipanggil kereaktifan.

Mari kita uji secara praktikal. Katakan kita mempunyai sifat berikut:

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

Tunjukkan nilai sifat ini:

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

Buat satu butang, yang apabila ditekan akan menukar sifat kita:

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

Sekarang tulis kaedah yang akan dipanggil apabila butang diklik dan mengubah sifat:

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

Jika semua kod dikumpulkan dan butang ditekan - teks pada skrin akan secara reaktif bertukar kepada yang lain.