Vue ফ্রেমওয়ার্কে রিঅ্যাকটিভিটি

data-এর যেকোনো ডেটা পরিবর্তন পৃষ্ঠায় এই ডেটার প্রদর্শন তাৎক্ষণিকভাবে পরিবর্তিত হওয়ার দিকে নিয়ে যায়। Vue-এর এই আচরণকে রিঅ্যাকটিভিটি বলা হয়।

আসুন বাস্তবে পরীক্ষা করে দেখি। ধরুন আমাদের নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

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

আসুন এই বৈশিষ্ট্যের মানটি আউটপুট করি:

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

আসুন একটি বাটন তৈরি করি, যাতে ক্লিক করলে আমাদের বৈশিষ্ট্য পরিবর্তিত হবে:

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

এখন একটি মেথড লিখি, যা বাটনে ক্লিক করলে কল হবে এবং বৈশিষ্ট্য পরিবর্তন করবে:

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

সমস্ত কোড একত্রিত করে এবং বাটনে ক্লিক করলে - স্ক্রিনের টেক্সট রিঅ্যাকটিভলি অন্য কিছুতে পরিবর্তিত হবে।