What is Vue.js?

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Vue ၏ progressive framework အယူအဆကို ရှင်းပြရန်
Declarative UI နှင့် component-based UI ကို ခွဲခြားရန်

ရိုးရိုးလေး ရှင်းပြမယ်

Vue က JavaScript state ပြောင်းလဲမှုကို DOM ထဲသို့ အလိုအလျောက်ပြန်လည်ဖော်ပြပေးသည်။ App အသေးတစ်ခုတွင် CDN ဖြင့် စတင်နိုင်သလို ကြီးမားသော app တွင် Single-File Components, Router နှင့် state store တို့ဖြင့် တိုးချဲ့နိုင်သည်။

javascript

import { createApp, ref } from 'vue'

createApp({
  setup() {
    const message = ref('မင်္ဂလာပါ Vue!')
    return { message }
  },
  template: '<h1>{{ message }}</h1>'
}).mount('#app')

You should see

မင်္ဂလာပါ Vue!

လက်တွေ့စမ်းကြည့်ရန်

message ကို မိမိနာမည်ပါသော စာသားအဖြစ်ပြောင်းပြီး browser တွင် render လုပ်ပါ။

Vue.js Guide — Vue.js

ဒီနေရာမှာ လူအများမှားတတ်တယ်

ref value ကို JavaScript ထဲတွင် .value မပါဘဲ ပြောင်းခြင်း
mount target #app ကို HTML တွင်မထည့်ခြင်း

လေ့ကျင့်ခန်း

message ကို မိမိနာမည်ပါသော စာသားအဖြစ်ပြောင်းပြီး browser တွင် render လုပ်ပါ။

You'll know it worked when: မင်္ဂလာပါ Vue!