Vue.js သည် front-end development ဟုခေါ်သော အပလီကေးရှင်း၏ အမြင်အာရုံကို အဓိကအာရုံစိုက်သည်။ အခြားပရောဂျက်များနှင့် စာကြည့်တိုက်များနှင့် ပေါင်းစည်းရန် အလွန်လွယ်ကူသောကြောင့် Vue.js သည် နေ့စဉ်နှင့်အမျှ လူကြိုက်များလာသည်။ တပ်ဆင်အသုံးပြုရန် အလွန်ရိုးရှင်းပါသည်။
Vue.js သည် တိုးတက်သော JavaScript မူဘောင်တစ်ခုဖြစ်သည်။ open source ဖြစ်ပြီး အပြန်အလှန်အကျိုးပြုသော ဝဘ်အသုံးပြုသူ အင်တာဖေ့စ်များနှင့် စာမျက်နှာတစ်ခုတည်း အပလီကေးရှင်းများ (SPAs) တီထွင်ရန်အတွက် အသုံးပြုသည်။ Vue.js ကို အများအားဖြင့် Vue အဖြစ်ရည်ညွှန်းပြီး "view.js" သို့မဟုတ် "view" ဟု အသံထွက်သည်။
Single Page Application သို့မဟုတ် SPA သည် အသုံးပြုသူများအား desktop အပလီကေးရှင်းကဲ့သို့ အလွန်ချောမွေ့၊ တုံ့ပြန်မှုနှင့် မြန်ဆန်သော အတွေ့အကြုံကို ပေးဆောင်သည့် ဝဘ်အပလီကေးရှင်း သို့မဟုတ် ဝဘ်ဆိုက်တစ်ခုဖြစ်သည်။ စာမျက်နှာတစ်ခုတည်းတွင် အပလီကေးရှင်းတစ်ခုတွင် စာမျက်နှာတစ်ခုတွင် မီနူး၊ ခလုတ်များနှင့် ဘလောက်များပါရှိသည်။ အသုံးပြုသူတစ်ဦးက ၎င်းတို့ထဲမှ တစ်ခုကို နှိပ်လိုက်သောအခါ၊ ၎င်းသည် ဆာဗာတစ်ခုမှ စာမျက်နှာအသစ်တစ်ခုလုံးကို တင်ခြင်းထက် လက်ရှိစာမျက်နှာကို ပြန်လည်ရေးသားသည်။ ဒါဟာ သူ့ရဲ့ တုံ့ပြန်မှု အရှိန်နောက်ကွယ်က အကြောင်းအရင်း ဖြစ်ပါတယ်။
Vue သည် frontend development အတွက် အခြေခံအားဖြင့် ဖန်တီးထားသောကြောင့် HTML၊ JavaScript နှင့် CSS ဖိုင်များစွာကို ကိုင်တွယ်ရန် လိုအပ်ပါသည်။ Vue.js သည် အသုံးပြုသူများအတွက် HTML ကို ညွှန်ကြားချက်များဟုခေါ်သော HTML ရည်ညွှန်းချက်များဖြင့် တိုးချဲ့ရန် လွယ်ကူစေသည်။ Vue.js သည် built-in ညွှန်ကြားချက်များနှင့် လမ်းညွှန်ချက်များစွာကို ပေးဆောင်သည်။ defiHTML အပလီကေးရှင်းများ၏ လုပ်ဆောင်နိုင်စွမ်းကို မြှင့်တင်ရန်အတွက် အသုံးပြုသူမှ nite။
အောက်တွင် Vue.js ၏ အရေးကြီးဆုံး အင်္ဂါရပ်များစာရင်း ဖြစ်သည် ။
Vue.js အစိတ်အပိုင်းများသည် ဤဘောင်၏ အရေးကြီးသောအင်္ဂါရပ်များထဲမှ တစ်ခုဖြစ်သည်။ ၎င်းတို့ကို ပြန်သုံးနိုင်သော ကုဒ်ကို ထည့်သွင်းရန် အခြေခံ HTML အစိတ်အပိုင်းများကို တိုးချဲ့ရန် ၎င်းတို့ကို အသုံးပြုသည်။ HTML တွင် နောက်ပိုင်းတွင် ပြန်လည်အသုံးပြုနိုင်သည့် Vue.js အပလီကေးရှင်းများတွင် ပြန်သုံးနိုင်သော စိတ်ကြိုက်ဒြပ်စင်များကို သင်ဖန်တီးနိုင်သည်။
Vue.js သည် ပြန်ဆိုထားသော DOM ကို Vue instance data နှင့် ချိတ်ဆက်ရန် အသုံးပြုနိုင်သည့် HTML-အခြေခံ နမူနာပုံစံများကို ပံ့ပိုးပေးပါသည်။ Vue နမူနာပုံစံများအားလုံးသည် spec-ကိုက်ညီသောဘရောက်ဆာများနှင့် HTML ခွဲခြမ်းစိတ်ဖြာခြင်းဖြင့်ခွဲခြမ်းစိတ်ဖြာနိုင်သည့်တရားဝင် HTML ဖြစ်သည်။ Vue.js သည် မော်ဒယ်များကို Virtual DOM rendering functions များအဖြစ် စုစည်းသည်။ Vue သည် ဘရောက်ဆာကို ပြန်လည်မွမ်းမံခြင်းမပြုမီ အစိတ်အပိုင်းများကို virtual DOM မှတ်ဉာဏ်သို့ ပြန်ဆိုသည်။ Vue သည် အပလီကေးရှင်းအခြေအနေသို့ ပြောင်းလဲသည့်အခါ အနည်းဆုံး DOM ခြယ်လှယ်မှုပမာဏကို ပြန်လည်ဖော်ပြရန်အတွက် အနည်းဆုံး အစိတ်အပိုင်းအရေအတွက်ကိုလည်း တွက်ချက်နိုင်သည်။
Vue သည် ရိုးရှင်းသော JavaScript အရာဝတ္ထုများကို အသုံးပြုကာ ပြန်လည်တင်ဆက်ခြင်းကို အကောင်းဆုံးဖြစ်အောင် လုပ်ဆောင်သည့် တုံ့ပြန်မှုစနစ်တစ်ခုကို ပံ့ပိုးပေးပါသည်။ ဤလုပ်ငန်းစဉ်တွင်၊ အစိတ်အပိုင်းတစ်ခုစီသည် ၎င်း၏ ဓာတ်ပြုမှုဆိုင်ရာ မှီခိုမှုကို ခြေရာခံသည်၊ ထို့ကြောင့် စနစ်သည် မည်သည့်အချိန်နှင့် မည်သည့်အစိတ်အပိုင်းများကို ပြန်လည်ဖော်ပြရမည်ကို အတိအကျသိသည်။
စာမျက်နှာလမ်းညွှန်ခြင်းကို vue-router ၏အကူအညီဖြင့်လုပ်ဆောင်သည်။ သင့်စာမျက်နှာတစ်ခုတည်းအပလီကေးရှင်းအတွက် တရားဝင်ပံ့ပိုးထားသော vue-router စာကြည့်တိုက်ကို သင်အသုံးပြုနိုင်ပါသည်။
ဒြပ်စင်များကို DOM မှထည့်သွင်းခြင်း၊ အပ်ဒိတ်လုပ်ခြင်း သို့မဟုတ် ဖယ်ရှားသည့်အခါတွင် Vue သည် မတူညီသောအကူးအပြောင်းအကျိုးသက်ရောက်မှုများကို အသုံးပြုခွင့်ပေးသည်။
Vue.js ကိုအသုံးပြုရန်နည်းလမ်းများစွာရှိသည်။ ၎င်း၏တရားဝင်ဆိုက်သို့သွားခြင်းဖြင့် ၎င်းကိုထည့်သွင်းနိုင်သည် သို့မဟုတ် CDN စာကြည့်တိုက်မှ Vue.js ဖိုင်ကိုလည်း စတင်အသုံးပြုနိုင်ပါသည်။ ဤသည်မှာ သင့်ပရောဂျက်တွင် Vue.js အသုံးပြုရန် နည်းလမ်းအချို့ဖြစ်သည်။
Tag ကိုသုံးချင်ရင် <script> Vue.js သည် သင်၏ HTML ဖိုင်သို့ တိုက်ရိုက်၊ ၎င်းကို တရားဝင် ဝဘ်ဆိုက်မှ ဒေါင်းလုဒ်လုပ်ရန် လိုအပ်သည်။
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Vue.js တရားဝင် ဝဘ်ဆိုဒ်ကို သွားကြည့်ရအောင် https://vuejs.org/v2/guide/installation.html သင့်လိုအပ်ချက်အရ vue.js ကိုဒေါင်းလုဒ်လုပ်ရန်။
သင့်လျှောက်လွှာတွင် CDN မှ Vue.js ဖိုင်ကိုလည်း သုံးနိုင်သည်။ ဒြပ်စင်အတွင်းရှိ https://unpkg.com/vue@3/dist/vue.global.js လင့်ခ်ကို အသုံးပြုပါ။ <script>, အောက်ပါအတိုင်း:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js သည် ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုနှင့် Single Page Applications (SPA) တည်ဆောက်ခြင်းအတွက် အသုံးများသော နောက်ဆုံးပေါ် ဆော့ဖ်ဝဲနည်းပညာများထဲမှ တစ်ခုဖြစ်သည်။ အမည်မှ ခန့်မှန်းနိုင်သကဲ့သို့၊ ၎င်းကို UI သို့မဟုတ် ပရောဂျက်၏ ဖော်ပြဘက်ခြမ်းအတွက် အများအားဖြင့် အသုံးပြုသည်။
သင့်ပရောဂျက်တွင် Vue.js အသုံးပြုခြင်း၏ အကျိုးကျေးဇူးများကို ကြည့်ကြပါစို့။
Vue.js ၏အကြီးမားဆုံးအားသာချက်တစ်ခုမှာ၎င်းသည်အရွယ်အစားအလွန်သေးငယ်သည်။ JavaScript framework တစ်ခု၏အောင်မြင်မှုသည် ၎င်း၏အရွယ်အစားပေါ်တွင် များစွာမူတည်ပြီး ဤစိတ်လှုပ်ရှားစရာကောင်းသော JavaScript plugin သည် 18-21KB သာရှိသောကြောင့် သင်သည် အချိန်တိုအတွင်း အလွယ်တကူဒေါင်းလုဒ်လုပ်ပြီး အသုံးပြုနိုင်သည်။
Vue.js မူဘောင်တွင် အလွန်ရိုးရှင်းသော ဖွဲ့စည်းပုံရှိပြီး နားလည်ရန် အလွန်လွယ်ကူသည်။ ၎င်းသည် ဤမူဘောင်၏ လူကြိုက်များမှုအတွက် အကြောင်းရင်းတစ်ခုဖြစ်သည်။ HTML နှင့် JavaScript ကို ရင်းနှီးပါက Vue.js တွင် အလွယ်တကူ ကုဒ်လုပ်နိုင်ပါသည်။ အသုံးပြုသူများသည် ၎င်း၏ရိုးရှင်းသောဖွဲ့စည်းပုံနှင့် အပလီကေးရှင်းများကို တီထွင်ထားသောကြောင့် ၎င်းတို့၏ဝဘ်ပရောဂျက်တွင် Vue.js ကို အလွယ်တကူထည့်နိုင်သည်။
Vue.js တွင် အရာအားလုံးအတွက် အစိတ်အပိုင်းများစွာ ရှိပြီး ရှိပြီးသား အပလီကေးရှင်းများနှင့် အလွန်လျင်မြန်စွာ ပေါင်းစပ်နိုင်သည်။ JavaScript မှာရေးထားတဲ့ ဘယ် application နဲ့မဆို ပေါင်းစပ်နိုင်ပါတယ်။
Vue.js ၏ လိုက်လျောညီထွေရှိသော သဘောသဘာဝသည် React.js၊ Angular.js နှင့် အခြားသော JavaScript မူဘောင်အသစ်များကို နားလည်ရန် လွယ်ကူစေသည်။ HTML ဖိုင်များ၊ JavaScript ဖိုင်များနှင့် သန့်ရှင်းသော JavaScript ဖိုင်များကို ရေးသားရန် virtual node များကို အသုံးပြုရန် လိုက်လျောညီထွေမှုများစွာကို ပေးစွမ်းသည်။
Vue.js အပလီကေးရှင်းများတွင် ပြန်သုံးနိုင်သော စိတ်ကြိုက်ဒြပ်စင်များကို သင်ဖန်တီးနိုင်သည်။
Vue.js သည် အလွန်ရိုးရှင်းသော၊ ပြီးပြည့်စုံပြီး အသေးစိတ်စာရွက်စာတမ်းများကို ပံ့ပိုးပေးသောကြောင့် HTML နှင့် JavaScript နှင့် ပတ်သက်၍ စိတ်ကူးအနည်းငယ်ရှိသော developer များသည် ၎င်းကို ပရိုဂရမ်တွင် အသုံးပြုနိုင်သည်။
Vue.js သည် ReactJS၊ Ember ကဲ့သို့သော အခြားရှိပြီးသား framework များနှင့် ဆင်တူသော virtual DOM ကို အသုံးပြုသည်။ virtual DOM သည် မူရင်း HTML DOM ၏ ပေါ့ပါးသော in-memory tree ကိုယ်စားပြုမှုဖြစ်ပြီး ကနဦး DOM ကို မထိခိုက်စေဘဲ အပ်ဒိတ်လုပ်ထားသည်။
Vue.js သည် HTML ဘလောက်များကို ကိုင်တွယ်ရာတွင် ရိုးရှင်းစေမည့် ၎င်း၏ Model View View Model (MVVM) ဗိသုကာနှင့် နှစ်လမ်းသွား ဆက်သွယ်မှုကို ပံ့ပိုးပေးပါသည်။
မူဘောင်သည် ရိုးရှင်းပြီး ရိုးရှင်းသော ပုံစံအထားအသိုကို အသုံးပြု၍ DOM သို့ ဒေတာများကို ကြေငြာနိုင်စေမည့် စနစ်တစ်ခုပါရှိသည်။
ဤသည်မှာ ဥပမာတစ်ခုဖြစ်သည်။
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
</script>
</body>Vue.js မူဘောင်သည် ကျွန်ုပ်တို့အား ခွင့်ပြုသည်။ defiHTML အပလီကေးရှင်းများအတွက် လုပ်ဆောင်နိုင်စွမ်းကို ပေးဆောင်ရန် အသုံးပြုသည့် ညွှန်ကြားချက်များဟုခေါ်သော HTML အရည်အချင်းများ။
Vue.js တွင် လမ်းညွှန်ချက် နှစ်မျိုးရှိသည်။
Vue.js သည် ဒေတာအတွက် နေရာချထားပေးသူအဖြစ် {{}} ဘောင်နှစ်ထပ်ကို အသုံးပြုပြီး Vue.js လမ်းညွှန်ချက်များသည် v-ရှေ့ဆက်ကို အသုံးပြုသည့် HTML ရည်ညွှန်းချက်များဖြစ်သည်။
Vue အက်ပ်သည် DOM ဒြပ်စင်တစ်ခုသို့ ချိတ်ဆက်ပြီး ၎င်းကို အပြည့်အဝ ထိန်းချုပ်သည်။ အထက်ပါဥပမာတွင်၊ ၎င်းသည် #app ဖြစ်သည်။
Vue ဖြင့် HTML ကို entry point အဖြစ် မှတ်ယူနိုင်ပြီး ဖန်တီးထားသော Vue instance အတွင်း အခြားအရာအားလုံး ဖြစ်ပျက်နေပါသည်။
ကျွန်ုပ်တို့သည် element နှင့် attribute binding ကိုကြိုးစားသည့်ဥပမာကိုကြည့်ကြပါစို့။
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html> ဤကိစ္စတွင်၊ v-bind attribute အသစ်သည် ညွှန်ကြားချက်ဖြစ်သည်။ ညွှန်ကြားချက်များကို Vue မှ ပံ့ပိုးပေးသော သီးသန့် attribute များဖြစ်ကြောင်း ညွှန်ပြရန် v- prefix ဖြင့် အသုံးပြုပြီး ပြန်ဆိုထားသော DOM တွင် အထူးတုံ့ပြန်မှု လုပ်ဆောင်ရန် အသုံးပြုပါသည်။
ဥပမာ၏ရလဒ်မှာ အောက်ပါအတိုင်းဖြစ်သည်။
Ercole Palmeri
ဆေးရောင်ခြယ်ခြင်းမှတစ်ဆင့် ကောင်းမွန်သော မော်တာစွမ်းရည်ကို ပြုစုပျိုးထောင်ခြင်းသည် ကလေးများကို စာရေးခြင်းကဲ့သို့ ပိုမိုရှုပ်ထွေးသောစွမ်းရည်များအတွက် ပြင်ဆင်ပေးသည်။ အရောင်ခြယ်ရန်…
ရေတပ်ကဏ္ဍသည် ကမ္ဘာလုံးဆိုင်ရာ စီးပွားရေးအင်အားကြီးဖြစ်ပြီး၊ ဘီလီယံ ၁၅၀ ရှိသော စျေးကွက်ဆီသို့ လျှောက်လှမ်းနေသော...
ပြီးခဲ့သည့်တနင်္လာနေ့တွင် Financial Times သည် OpenAI နှင့်သဘောတူညီချက်တစ်ခုကြေငြာခဲ့သည်။ FT သည် ၎င်း၏ ကမ္ဘာ့အဆင့်မီ သတင်းစာပညာကို လိုင်စင်ထုတ်ပေးသည်...
သန်းပေါင်းများစွာသောလူများသည် streaming ဝန်ဆောင်မှုများအတွက်ပေးဆောင်ပြီးလစဉ်စာရင်းသွင်းမှုအခကြေးငွေပေးဆောင်သည်။ အများအမြင်မှာ သင်...
