vue_wallpaper
System

VUE JavaScript Framework ( Introduction Part – 1 )

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 ဆိုတာနဲ႕ ခ်ိတ္ထားတာျဖစ္တဲ့အတြက္

Message: Aung Aung

ဆိုျပီး 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 ျဖစ္ေအာင္ မိတ္ဆက္ေပးခဲ့တာျဖစ္ျပီး ဆက္လက္၍ အပိုင္း ၂ ကိုလည္း ဆက္လက္ ဖတ္ရႈေပးပါဦးလို႕ တိုက္တြန္းပါရေစဗ်ာ။ စာဖတ္သူ အေပါင္း သာယာေသာ ေန႕ရက္ေလးေတြ ပိုင္ဆိုင္ၾကပါေစ။ အခုလို လာေရာက္ ဖတ္ရႈေပးတဲ့အတြက္လည္း ေက်းဇူးအထူးတင္ပါတယ္ ခင္ဗ်ာ။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *