Vue တွင် အဝင်အချက်အလက်များသို့ ဒေတာများ နှစ်ဖက်ချိတ်ဆက်ခြင်း

ယခု ကျွန်ုပ်တို့သည် Vue framework အတွင်း အဝင်အချက်အလက်များနှင့် အလုပ်လုပ်ခြင်းကို သင်ယူသွားမည်။ ၎င်းတို့ကို အသုံးပြု၍ စာမျက်နှာပေါ်တွင် တုံ့ပြန်အပြောင်းအလဲပြုနိုင်သော ဒေတာများကို ထည့်သွင်းမည်။ စတင်လိုက်ကြရအောင်။ ကျွန်ုပ်တို့တွင် input တစ်ခုရှိသည်ဆိုပါစို့။

App.vue<template>
  <input>
</template>

ထို့အပြင် ကျွန်ုပ်တို့တွင် message ဟူသော property တစ်ခုလည်းရှိသည်ဆိုပါစို့။

javascriptdata() {
  return {
    message: 'hello',
  }
}

ကျွန်ုပ်တို့သည် ဤ property နှင့် input ကို ဤသို့ဆက်သွယ်နိုင်သည်။ ဆိုလိုသည်မှာ ၎င်းတို့အနက်မှ တစ်ခုခုပြောင်းလဲခြင်းသည် အခြားတစ်ခု၏ ပြောင်းလဲခြင်းကို ဖြစ်ပေါ်စေသည်။ ဤသို့လုပ်ဆောင်ခြင်းကို input နှင့် ချိတ်ဆက်ထားသော property ကို ဖော်ပြသည့် v-model directive ကိုအသုံးပြု၍ လုပ်ဆောင်သည်။

ကျွန်ုပ်တို့၏ input ကို message property နှင့် ချိတ်ဆက်လိုက်ကြရအောင်။

App.vue<template>
  <input v-model="message">
</template>

ကုဒ်ကိုစတင်အလုပ်လုပ်စဉ်၊ input အတွင်း၌ message property ၏ စာသားသည် ရှိနေမည်။ အကယ်၍ input အတွင်းရှိ ဒေတာများကို တည်းဖြတ်ပြောင်းလဲပါက property သည်လည်း သင့်လျော်စွာ ပြောင်းလဲသွားမည်။ ဤအရာကိုမြင်တွေ့ရန်အတွက်၊ input အတွင်းရိုက်ထည့်ထားသော အကြောင်းအရာကို စာပိုဒ်တစ်ခုခုတွင် ထုတ်ပြကြည့်ကြရအောင်။

App.vue<template>
  <input v-model="message">
  <p>{{ message }}</p>
</template>