VUE အကြောင်းအရာနှင့် အသုံးပြုပုံ

မင်္ဂလာပါ။ အရင်ဦးဆုံး ကျွန်တော် ကိုယ်ကိုယ်ကို အရင် မိတ်ဆက်ပေးချင်ပါတယ် ခင်ဗျာ။
ကျွန်တော့်နာမည် ဌေးမင်းခေါင် ဖြစ်ပါတယ်။ ယခု Spiceworks Myanmar ကုမ္ပဏီမှာ PHP Web Developer အနေနဲ့ အလုပ်လုပ်လျက်ရှိပါတယ်။ JS Framework တွေ အများအပြား ရှိပေမယ့် ဒီနေ့ စာဖတ်သူများကို မိတ်ဆက်ပေးချင်တာကတော့ VUE ဆိုတဲ့ JavaScript Framework ဖြစ်ပြီး ၎င်းနှင့် ပတ်သက်၍ ကျွန်တော် လေ့လာထားသလောက် အတတ်နိုင်ဆုံး နှင့် အရှင်းလင်းဆုံးဖြစ်အောင် ရေးသားပေးသွားပါမယ်။

VUE ကို ဘယ်လို အသံထွက်မလဲ ?

VUE ဆိုတာ စာလုံးရဲ့ အသံထွက်က ( /vju:/  – view ) လို ခေါ်ပါတယ်။

VUE ဆိုတာ ဘာလဲ ?

VUE ဆိုတာ Javascript Framework တစ်ခုဖြစ်ပြီး Web Developer များအတွက် UI Interface တွေ တည်ဆောက်တဲ့အခါ အသုံးပြုနိုင်ပါတယ်။ အထူးသဖြင့် Value တစ်ခုကို Change Action တွေမှာ view ကို ထိန်းချုပ်တဲ့အခါ Display လုပ်တဲ့အခါ အဓိက အသုံးပြုပါတယ်။ HTML CSS နဲ့ JS ကို Intermediate အဆင့်ရှိတဲ့သူတွေ ရည်ရွယ်ထားပြီး Front-end ကို အခုမှ စလုပ်သူများအတွက်တော့ အခက်အခဲ အနည်းငယ် ရှိနိုင်ကောင်း ရှိနိုင်ပေမယ့် အရမ်းကြီး အခက်အခဲတော့ မရှိနိုင်ပါဘူး။ VUE က သုံးရတဲ့နေရာမှာ အတော်လေး လွယ်ကူတယ်လို့ ဆိုရမှာပါ။

VUE ကို ဘယ်လို စတင် အသုံးပြုမလဲ။

VUE ကို Project မှာ စတင် အသုံးပြုမယ်ဆို <script src=“https://cdn.jsdelivr.net/npm/vue”></script> ကို သင့် Project ရဲ့ header Tag မှာ ထည့်ပြီးတော့ အရင် ချိတ်ဆက်ရပါမယ်။ ဒါမှမဟုတ် Offline သုံးမယ်ဆိုရင်တော့  https://cdn.jsdelivr.net/npm/vue ဆိုတဲ့ Link ကို ဖွင့်ပြီး js ကုတ်ကို အကုန်ကူးယူးပြီး သင့် Project Folder က js folder ထဲမှာ vue.js ဆိုတဲ့ ဖိုင်အလွတ်တခုကို ဆောက်ပြီး Paste လုပ်လိုက်ပါ။ ပြီးရင် အဲ့ဒီ vue.js ကို သင့် Project နဲ့ ချိတ်လိုက်ပါ။

အကယ်၍ သင် VUE ကို source code များနှင့်တကွ စတင်လေ့လာလိုရင် GitHub တွင် ဒေါင်းလုပ်ဆွဲပြီး လေ့လာနိုင်ပါတယ်။ GitHub လိပ်စာကတော့ https://github.com/vuejs/vue  ဖြစ်ပါတယ်။

VUE နဲ့ပတ်သက်တဲ့ အချက်အလက်လေးတွေကို မျှဝေလိုပါတယ်။ VUE ဆိုတာ ပေါ့ပေါ့ပါးပါးနဲ့ Solution ကောင်းကောင်းတစ်ခုကို ဖန်တီးနိုင်အောင် ရည်ရွယ်တည်ဆောက်ထားတဲ့ Framework တစ်ခု ဖြစ်ပါတယ်။ View Model ( View တည်ဆောက်ပုံကို ထိန်းချုပ်ခြင်း) ကို အဓိကထားရည်ရွယ်ထားတဲ့ Library Source တစ်ခု ဖြစ်ပါတယ်။ AngularJS နဲ့ တူညီတဲ့ အချက်တွေ အများကြီး ရှိပါတယ်။ SPA ( Single Page Applications ) တွေကို အကောင်းဆုံး တည်ဆောက်ဖို့ ရည်ရွယ်ထားတာဖြစ်ပါတယ်။ SPA ဆိုတာ Page တခုတည်းနဲ့ Content တွေ Dynamic ဖြစ်နေတဲ့ Site Application များကို ဆိုလိုတာဖြစ်ပါတယ်။ လုပ်ဆောင်နိုင်စွမ်း မြန်ဆန်မှုကလည်း React ဆိုတဲ့ JS Framework နဲ့လည်း တူညီမှု နီးပါးဖြစ်ပါတယ်။ HTML ကို အခြေခံထားတဲ့ UI Templates တွေနဲ့  JS Function တွေကနေ View Render လုပ်တဲ့အခါ အသုံးချနိုင်ပါတယ်။ အကယ်၍ သင်က Web App တွေကို တည်ဆောက်တဲ့အခါ CSS တွေကို JS အသုံးပြုပြီး Condition တွေ Value တွေနဲ့ ထိန်းချုပ်ရတာ ဝါသနာပါတဲ့သူ တယောက်ဆိုရင် VUE က သင့်အတွက်လို့သာ တွေးထားလိုက်ပါတော့။ သူရဲ့ လုပ်ဆောင်နိုင်တဲ့ စွမ်းရည်ကတော့ အတော်ကောင်းမွန် မြန်ဆန်ပြီး အသုံးပြုရတာလည်း အတော် လွယ်ကူမှု ရှိပါတယ်။
SPA ဆိုတဲ့ စကားလုံးကို အနည်းငယ် ရှင်းပြလိုပါတယ်။
SPA (single page application) ဆိုတာ Web Application သို့မဟုတ် Website ကို ရည်ညွှန်းတာဖြစ်ပါတယ်။
ဘယ်လိုပုံစံမျိုးလဲဆိုတော့ user ရဲ့ လုပ်ဆောင်ချက်၊ အချက်အလက်ထည့်သွင်းလိုက်တဲ့ပုံကို မူတည်ပြီး
လက်ရှိ page ရဲ့ Content တွေကို Page တစ်ခုလုံးကို Reload ပြန်လုပ်မည့်အစား AJAX တို့ရဲ့ အကူအညီဖြင့်
အလိုအလျောက် ပြောင်းလဲပေးတဲ့ Site များကို ဆိုလိုတာ ဖြစ်ပါတယ်။
VUE Application တိုင်းဟာ VUE Instance အသစ်တခု တည်ဆောက်ရပါတယ်။

ရေးသားပုံ ( ၁ )

var vm = new Vue({
	// options
});

ရေးသားပုံ ( ၂ )

var vm = new Vue({
	el : ‘#example’,
	data : {
		//values
	}	
});

VUE Instance ထဲ ထည့်ရတဲ့ Data နဲ့ Methods လေးတွေအကြောင်း ပြောပြချင်ပါတယ်။ VUE ဟာ function တွေမှာ ကြေညာထားတဲ့ Properties တွေ အားလုံးကို သူ့ Reactivity System နဲ့ ချိတ်ထားလိုက်ပါတယ်။ Reactivity System ဆိုတာ VUE Instance ထဲမှာ ရှိတဲ့ Value တွေ အပြောင်းအလဲဖြစ်တိုင်း သူနဲ့ သက်ဆိုင်ရာ function တွေ အခြား ချိတ်ဆက်ထားတဲ့ value တွေကို re-render လုပ်ဆောင်ပေးတဲ့ စနစ်ဖြစ်ပါတယ်။ အဲလို လုပ်ဆောင်တဲ့ အခါ View နဲ့ ချိတ်မယ်ဆိုရင်တော့ el ဆိုတဲ့ Properties ထဲမှာ သင် ထိန်းချုပ်ချင်တဲ့ HTML Tag ရဲ့ id နဲ့ ချိတ်ပေးရမှာ ဖြစ်ပါတယ်။ ဒါမှ value တခု ပြောင်းတိုင်းပြောင်းတိုင်း el ထဲရှိ သတ်မှတ်ထားတဲ့ value တွေ function တွေကို လုပ်ဆောင်ပေးမှာ ဖြစ်ပါတယ်။

အောက်က example မှာ ဆိုရင်တော့ el မပါဘဲ data သာ အသုံးပြုထားပြီး အပြင်ဘက် data object ဆိုတဲ့ variable တခုနဲ့ ချိတ်ထားခြင်းဖြစ်ပါတယ်။ အဲအတွက်ကြောင့် အပြင်က data object က a ဆိုတဲ့ တန်ဖိုးကို ပြင်လို့ဘဲဖြစ်ဖြစ် vm ထဲက data ရဲ့ a တန်ဖိုးကို ပြင်တာဘဲ ဖြစ်ဖြစ် ချိတ်ဆက်ထားတဲ့အတွက် တန်ဖိုးနှစ်ခုဟာ synchronous ဖြစ်နေမှာဖြစ်ပါတယ်။

var data = { a: 1 }

// Define new vue instance
var vm = new Vue({
    data: data
})

// Check two properties are the same
vm.a === data.a
// Output : true

// Change value in vue instance's properties
vm.a = 2

// Also value in variable data will be changed.
console.log(data.a); 
// Output : 2

// When 'data' properties value changed,
// also value in vue instance will be changed.
// Therefore, vue will automatically do synchronous 
// whenever defined in its data properties
data.a = 3
console.log(vm.a); 
// Output : 3

Methods များနဲ့ မိတ်ဆက်ပေးချင်ပါတယ်။ ပထမဆုံးတစ်ခုကတော့

watch

method ဖြစ်ပါတယ်။ နာမည်ဖြစ်တဲ့ watch ဆိုတဲ့အတိုင်းဘဲ value တစ်ခုရဲ့ အပြောင်းအလဲကို စောင့်ကြည့်ထားပြီး အပြောင်းအလဲတစ်ခုခုဖြစ်တိုင်း ကိုယ် လုပ်ဆောင်လိုတဲ့ Function ကို Run ခိုင်းလို့ရပါတယ်။

watch

method မှာဆိုရင်တော့ oldVal နဲ့ newVal ဆိုပြီး parameter တန်ဖိုးတွေကို ယူလို့ရမှာဖြစ်ပြီး ကိုယ်က ပြောင်းသွားတာပေါ် မူတည်ပြီး ကိုယ်လုပ်ဆောင်ချင်တာ လုပ်ဆောင်လို့ ရပါတယ်။ အောက် example code မှာဆိုရင် အပြင်ကနေ data variable တခုကို ကြေညာထားပြီး vm ဆိုတဲ့ vue နဲ့ ချိတ်ထားပါတယ်။ အဲ့ဒီမှာ el: ‘#example ‘ ဆိုပြီး ထည့်ထားတဲ့အတွက် HTML က example ဆိုတဲ့ id တစ်ခု နဲ့ ချိတ်ထားပါတယ်။ ပြီးတော့ data အောက်က a ဆိုတဲ့ variable တန်ဖိုးကို vm.$watch နဲ့ စောင့်ကြည့်ထားပြီး newValue နဲ့ oldValue ဆိုပြီး ပြောင်းလဲသွားမယ့် parameter တန်ဖိုးတွေကို ယူထားပါတယ်။ function အောက်မှာ console log ထုတ်ထားတဲ့အတွက် တန်ဖိုးပြောင်းတိုင်း ပြောင်းတိုင်းမှာ browser ရဲ့ console မှာ မြင်နေရမှာ ဖြစ်ပါတယ်။

var data = { a: 1 }
var vm = new Vue({
    el: '#example',
    data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch is an instance method
vm.$watch('a', function (newValue, oldValue) {
    // This callback will be called when `vm.a` changes
    console.log('New : ' + newValue + ' - Old : ' + oldValue);
});

နောက်တစ်ခုကတော့

created

method ဖြစ်ပါတယ်။ သူလည်း နာမည်အတိုင်းဘဲ

create

ဆိုတော့ vue instance ရဲ့  အစမှာ run မှာ ဖြစ်ပါတယ်။ data အောက်မှာ

a

ဆိုတဲ့ တန်ဖိုး တစ်ခု ရှိပါတယ်။

created

ဆိုတဲ့ method အောက်မှာ console.log ထုတ်ထားတဲ့အတွက် Project စ run တာနဲ့

a is: 1

ဆိုပြီး ထုတ်ပေးမှာ ဖြစ်ပါတယ်။

new Vue({
	data: {
		a: 1
	},
	created: function () {
		// `this` points to the vm instance
		console.log('a is: ' + this.a)
	}
})
// => "a is: 1"

Methods တွေအကြောင်း ပြောပြီးတဲ့ အခါမှာတော့ သူ့မှာ အသုံးပြုမယ့် Template Syntax တွေကို ပြောပြချင်ပါတယ်။ Template Syntax တွေဟာဆိုရင်တော့ HTML ကို အခြေခံထားတဲ့ Syntax တွေဖြစ်ပါတယ်။ Template တွေကို Virtual DOM ( Document Object Model ) အဖြစ်သို့ ပြောင်းလဲပေးနိုင်ပြီး user-defined Function တွေထဲမှာ ယူသုံးနိုင်ပါတယ်။

Interpolations

သူဟာဆိုရင်တော့ တွန့်ကွင်းနှစ်ခု ( {{ }} ) အကြား variable ထည့်သွင်းပြီး vue နဲ့ data binding လုပ်တာ ဖြစ်ပါတယ်။ အောက် example code မှာဆိုရင် el မှာ

example

ကို ချိတ်ထားတာဖြစ်တဲ့အတွက် id example Tag အောက်က msg ဆိုတဲ့နေရာဟာ vue အောက် data ရဲ့ msg ဆိုတာနဲ့ ချိတ်ထားတာဖြစ်တဲ့အတွက်

ဆိုပြီး Output ထွက်လာမှာ ဖြစ်ပါတယ်။

<div id="example">Message: {{ msg }}</div>

new Vue({ el : ‘#example’ 
	data: { 
		msg : ‘Aung Aung’ 
	}
})

data binding

လုပ်တဲ့ အခါမှာလည်း စ run တဲ့အခါမှာဘဲ

binding

လုပ်ပြီး နောက်

binding

ကို အသက်မဝင်စေချင်တဲ့အခါမျိုး လုပ်စေချင်ရင် v-once ဆိုတဲ့ key ကို သုံးလို့ ရပါတယ်။

<div id="example">
<span v-once>This will never change: {{ msg }}</span>
</div>

new Vue({ el : ‘#example’ 
	data: { 
		msg : ‘Aung Aung’ 
	}
})

Tag

ရဲ့ Attributes တွေကို

binding

လုပ်မယ်ဆိုရင်လည်း လုပ်လိုရပါတယ်။

binding

လုပ်မယ်ဆိုရင် v-bind ဆိုတဲ့ keyword ကို အသုံးပြုပေးရမှာ ဖြစ်ပါတယ်။ ဥပမာ id ကို bind ချင်တယ်ဆိုရင် v-bind:id ဆိုပြီး ရေးပေးရပါမယ်။ အောက်မှာဆိုရင် id ကို dynamicId ဆိုပြီး ရေးထားတဲ့အတွက် vue အောက်က data မှာ dynamicId : ‘active’ ဆိုရင်
<div id=”active”>Hello</div>
ဆိုပြီး Output ထွက်လာမှာ ဖြစ်ပါတယ်။

<div v-bind:id="dynamicId">Hello</div>

bind

တဲ့အခါမှာ attribute ကို condition ခံပြီး လုပ်လည်း ရပါတယ်။ isButtonDisabled ရဲ့ တန်ဖိုးက null ဘဲ ဖြစ်ဖြစ်၊ undefined ဘဲ ဖြစ်ဖြစ်၊ false ဘဲ ဖြစ်ဖြစ် button က view ပေါ်ကနေ ပျောက်နေမှာ ဖြစ်ပါတယ်။

<button v-bind:disabled="isButtonDisabled">Button</button>

bind အကြောင်းပြောပြီးတော့ အခုတခါမှာတော့

condition

ကို inline ရေးသားတာလေးကို ပြောချင်ပါတယ်။

condition အတွက်ကတော့ v-if ဆိုတဲ့ keyword ကို အသုံးပြုနိုင်ပါတယ်။

<p v-if="seen">Now you see me</p>

Event တွေကို inline ရေးမယ်ဆိုရင်တော့ v-on ဆိုတဲ့ keyword ကို အသုံးပြုရမှာပါ။

<div id="example">
	<a v-on:click="sayHello">Facebook</a>
</div>

new Vue({ el : ‘#example’ ,
	methods: { 
		sayHello : function(){
			alert('Hello');
		}
	}
})

VUE Syntax တွေကို အသုံးပြုမယ်ဆိုရင် shorthands keywords တွေကို အသုံးပြုလို့ရပါတယ်။
v-bind Shorthand ကို :href ဆိုပြီး ရေးလို့ ရပါတယ်။

JS Script

new Vue({ el : ‘#example’ ,
	data: { 
		fbLink: 'http://www.facebook.com'
	},
	methods : {
		sayHello : function(){
			alert('Hello');
		}
	}
})

Original Syntax

<a v-bind:href="fbLink">Facebook</a>
<span v-on:click="sayHello">Facebook</span>

Shorthand Syntax

<a :href="fbLink">Facebook</a>
<span @click="sayHello">Facebook</span>

ယခု တင်ပြသွားတာတွေကတော့ VUE စတင်အသုံးပြုသူတွေ အတွက် Familiar ဖြစ်အောင် မိတ်ဆက်ပေးခဲ့တာဖြစ်ပြီး ဆက်လက်၍ အပိုင်း ၂ ကိုလည်း ဆက်လက် ဖတ်ရှုပေးပါဦးလို့ တိုက်တွန်းပါရစေဗျာ။ စာဖတ်သူ အပေါင်း သာယာသော နေ့ရက်လေးတွေ ပိုင်ဆိုင်ကြပါစေ။ အခုလို လာရောက် ဖတ်ရှုပေးတဲ့အတွက်လည်း ကျေးဇူးအထူးတင်ပါတယ် ခင်ဗျာ။