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

සියලුම කේතය එකට එකතු කර බොත්තම ක්ලික් කළහොත් - තිරය මත ඇති පෙළ ප්‍රතික්‍රියාශීලීව වෙනත් එකකට වෙනස් වේ.