Vue freymvorkida Reaktivlik

data dagi har qanday ma'lumot o'zgarishi sahifadagi ushbu ma'lumotlarning ko'rinishining zudlik bilan o'zgarishiga olib keladi. Vue-ning bu xatti-harakati reaktivlik deb ataladi.

Keling, amaliyotda tekshiramiz. Bizda quyidagi xususiyat mavjud bo'lsin:

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

Ushbu xususiyatning qiymatini chiqaramiz:

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

Bosilganda bizning xususiyatimizni o'zgartiradigan tugma yaratamiz:

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

Endi tugma bosilganda chaqiriladigan va xususiyatni o'zgartiradigan metodni yozamiz:

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

Agar barcha kodni birlashtirsak va tugmani bossak - ekrandagi matn reaktiv ravishda boshqasiga o'zgaradi.