Vue တွင် အဝင်အချက်အလက်များသို့ ဒေတာများ နှစ်ဖက်ချိတ်ဆက်ခြင်း
ယခု ကျွန်ုပ်တို့သည် Vue framework အတွင်း အဝင်အချက်အလက်များနှင့် အလုပ်လုပ်ခြင်းကို သင်ယူသွားမည်။ ၎င်းတို့ကို အသုံးပြု၍ စာမျက်နှာပေါ်တွင် တုံ့ပြန်အပြောင်းအလဲပြုနိုင်သော ဒေတာများကို ထည့်သွင်းမည်။ စတင်လိုက်ကြရအောင်။ ကျွန်ုပ်တို့တွင် input တစ်ခုရှိသည်ဆိုပါစို့။
<template>
<input>
</template>
ထို့အပြင် ကျွန်ုပ်တို့တွင်
message ဟူသော property တစ်ခုလည်းရှိသည်ဆိုပါစို့။
data() {
return {
message: 'hello',
}
}
ကျွန်ုပ်တို့သည် ဤ property နှင့် input ကို ဤသို့ဆက်သွယ်နိုင်သည်။
ဆိုလိုသည်မှာ ၎င်းတို့အနက်မှ တစ်ခုခုပြောင်းလဲခြင်းသည်
အခြားတစ်ခု၏ ပြောင်းလဲခြင်းကို ဖြစ်ပေါ်စေသည်။
ဤသို့လုပ်ဆောင်ခြင်းကို input နှင့် ချိတ်ဆက်ထားသော property ကို
ဖော်ပြသည့် v-model directive ကိုအသုံးပြု၍ လုပ်ဆောင်သည်။
ကျွန်ုပ်တို့၏ input ကို
message property နှင့် ချိတ်ဆက်လိုက်ကြရအောင်။
<template>
<input v-model="message">
</template>
ကုဒ်ကိုစတင်အလုပ်လုပ်စဉ်၊ input အတွင်း၌ message property ၏ စာသားသည် ရှိနေမည်။
အကယ်၍ input အတွင်းရှိ ဒေတာများကို တည်းဖြတ်ပြောင်းလဲပါက property သည်လည်း သင့်လျော်စွာ
ပြောင်းလဲသွားမည်။ ဤအရာကိုမြင်တွေ့ရန်အတွက်၊
input အတွင်းရိုက်ထည့်ထားသော အကြောင်းအရာကို စာပိုဒ်တစ်ခုခုတွင် ထုတ်ပြကြည့်ကြရအောင်။
<template>
<input v-model="message">
<p>{{ message }}</p>
</template>
Input တစ်ခုပေးထားသည်။ Input ထဲသို့ ရိုက်ထည့်သော စာသားသည် ၎င်းအောက်ရှိ စာပိုဒ်အတွင်း တန်းတူထွက်ပေါ်လာစေရန် လုပ်ဆောင်ပါ။
ယခင် ပုစ္ဆာကို ဤသို့ပြုပြင်ပါ၊ စာသားသည် အကြီးစာလုံးများ (upper case) ဖြင့် ပေါ်လာစေရန်။
Input တစ်ခုပေးထားသည်။ ယင်းထဲသို့ ဂဏန်းတစ်ခု ရိုက်ထည့်ပါစေ။ ရိုက်ထည့်သော ဂဏန်း၏ နှစ်ထပ်ကိန်း (square) ကို စာပိုဒ်အတွင်း ရိုက်ထည့်သည်နှင့်အမျှ ထွက်ပေါ်စေရန် လုပ်ဆောင်ပါ။
