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';
  }
}

यदि सारे कोड को एक साथ जोड़ दिया जाए और बटन पर क्लिक किया जाए - तो स्क्रीन पर टेक्स्ट रिएक्टिवली दूसरे में बदल जाएगा।