Vue.js ဆိုတာဘာလဲ။
Vue.js သည် သင့် အား ညွှန်ကြားချက်များ ဟုခေါ်သော HTML attribute များဖြင့် HTML ကို တိုးချဲ့ နိုင်စေပါသည်။
Vue.js ညွှန်ကြားချက် များသည် HTML အပလီကေးရှင်း များအတွက် လုပ်ဆောင်နိုင်စွမ်း ကို ပေးဆောင်သည်။
Vue.js သည် built-in ညွှန်ကြားချက်များနှင့် အသုံးပြုသူသတ်မှတ်ထားသော ညွှန်ကြားချက် များကို ပေးဆောင်သည်။
Vue.js ညွှန်ကြားချက်များ
Vue.js သည် {{ }}ဒေတာအတွက် နေရာကို ကိုင်ဆောင်ထားသူများအဖြစ် နှစ်ချက်ညှပ်များကို အသုံးပြုသည်။
Vue.js လမ်းညွှန်ချက်များသည် ရှေ့ဆက်ပါရှိသော HTML ရည်ညွှန်းချက်များဖြစ်သည်။v-
နမူနာမြင်ကွင်း
အောက်ဖော်ပြပါ ဥပမာတွင်၊ Vue object အသစ်ကို Vue() အသစ် ဖြင့် ဖန်တီးထားသည် ။
ပိုင်ဆိုင်မှု el- သည် Vue အရာဝတ္တုအသစ်ကို id="app" ဖြင့် HTML ဒြပ်စင်သို့ ချိတ်ဆက်သည် ။
ဥပမာ
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js ချိတ်ဆွဲခြင်း။
Vue အရာဝတ္တုကို HTML ဒြပ်စင်တစ်ခုသို့ ချည်နှောင်ထားသောအခါ၊ Vue အရာဝတ္ထုသည် ပြောင်းလဲသောအခါ HTML ဒြပ်စင်သည် ပြောင်းလဲသွားလိမ့်မည်-
ဥပမာ
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js နှစ်လမ်းတွဲချိတ်ခြင်း။
v-modelညွှန်ကြားချက်သည် HTML ဒြပ်စင်များ၏တန်ဖိုးကို အပလီကေးရှင်းဒေတာနှင့် ပေါင်းစည်းသည် ။
၎င်းကို two-way binding ဟုခေါ်သည်-
ဥပမာ
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js Loop Binding
v-forVue အရာဝတ္ထုများ array တစ်ခုအား HTML element ၏ "array" နှင့် ချိတ်ရန် ညွှန်ကြားချက် ကို အသုံးပြုခြင်း -
ဥပမာ
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>