posted by
System
Share

VUE JavaScript Framework ( Introduction Part – 2 )

မဂၤလာပါ။ အရင္ဦးဆံုး ကၽြန္ေတာ္ ကိုယ့္ကိုယ္ကို အရင္ မိတ္ဆက္ေပးခ်င္ပါတယ္ ခင္ဗ်ာ။
ကၽြန္ေတာ့္နာမည္ ေဌးမင္းေခါင္ ျဖစ္ပါတယ္။ ယခု Spiceworks Myanmar ကုမၸဏီမွာ PHP Web Developer အေနနဲ႕ အလုပ္လုပ္လ်က္ရိွပါတယ္။ အရင္တစ္ေခါက္တုန္းက VUE JavaScript Framework ( Introduction Part – 1 ) ကို မိတ္ဆက္ေပးခဲ့ျပီး ျဖစ္ပါတယ္။ အခုတစ္ခါမွာေတာ့ Part 2 ကို ဆက္လက္ တင္ျပေပးသြားမွာ ျဖစ္ပါတယ္။
Part 1 မွာေတာ့
1. VUE အေၾကာင္းအရာႏွင့္ အသံုးျပဳပံု
2. VUE ကို ဘယ္လို အသံထြက္မလဲ ?
3. VUE ဆိုတာ ဘာလဲ ?
4. VUE ကို ဘယ္လို စတင္ အသံုးျပဳမလဲ။
5. VUE Instance ၊ Interpolations
ဆိုျပီး မိတ္ဆက္ေပးခဲ့ပါတယ္။
ယခု Part 2 မွာေတာ့
1. Computed Properties and Watchers
2. Methods
3. Computed Setter ( get & set events )
4. Class and Style Bindings
5. Binding Inline Styles တို႕ကို အရွင္းလင္းဆံုး ျဖစ္ေအာင္ တတ္ႏိုင္သေလာက္ တင္ျပေပးသြားမွာ ျဖစ္ပါတယ္။

Computed Properties and Methods

ဒီမွာဆိုရင္ေတာ့ ကိုယ္လုပ္ေဆာင္မယ့္ Function ေတြ ၊ Properties ေတြကို အသံုးခ်ျပီး ေရးသားမွာ ျဖစ္ပါတယ္။ ဒါေၾကာင့္ ၎ကို ပိုမို နားလည္ေအာင္ Example Function ေတြ ၊ Logic စစ္တဲ့ Code ေတြရဲ႕ အသံုးျပဳနည္းကို ရွင္းျပေပးသြားမွာ ျဖစ္ပါတယ္။

JS Code


	var vm = new Vue({
		el: '#example',
		data: {
			message: 'Hello'
		},
		computed: {
			// a computed getter
			reversedMessage: function () {
				// `this` points to the vm instance
				return this.message.split('').reverse().join('')
			}
		},
		methods : {
			chVal : function(){
				this.message = 'Good Bye'
			}
		}
	})

HTML Code





{{ message.split('').reverse().join('') }}




{{ message }}




{{ reversedMessage }}

Code Line 03 – {{ message.split(”).reverse().join(”) }} မွာဆိုရင္ေတာ့ ရိုးရွင္းျပီး string function တစ္ခုျဖစ္တဲ့ reverse ( စာကို ေျပာင္းျပန္ လုပ္ျခင္း ) ကို အသံုးျပဳထားပါတယ္။
Code Lin 07 – {{ message }} ကေတာ့ နဂို ရိွတဲ့ တန္ဖိုးအတိုင္း ထုတ္ျပပါလိမ့္မယ္။
Code Line 11 – {{ reversedMessage }} မွာေတာ့ js မွာေရးထားတဲ့ computed ေအာက္က properties ကို ေခၚလိုက္တာျဖစ္တဲ့အတြက္ reversedMessage function က ျပန္လာမယ့္ တန္ဖိုးအတိုင္း ျပမွာ ျဖစ္ပါတယ္။ Output ကေတာ့ Code Line 03 နဲ႕ တူပါလိ့မ္မယ္။ သို႕ေသာ္ Code Line 03 ဟာဆိုရင္ function code ေတြ condition ေတြ မ်ားလာပါက simple မျဖစ္ေတာ့ဘဲ complex ျဖစ္လာမွာ ျဖစ္ပါတယ္။
Code Line 15 – @click=”chVal” ဟာဆိုရင္ေတာ့ js မွာေရးထားတဲ့ methods function ကို event @click ထဲ ထည့္လိုက္တာ ျဖစ္တဲ့အတြက္ button ကို click လိုက္ရင္ methods ေအာက္က chVal function က အလုပ္လုပ္မွာ ျဖစ္ပါတယ္။ chVal function က vue data ‘message’ ရဲ႕ တန္ဖိုးကို ‘Good Bye’ ဆိုျပီး ေျပာင္းလိုက္တာျဖစ္ပါတယ္။ vue data ‘message’ တန္ဖိုးက ‘Hello’ ကေန ‘Good Bye’ ဆိုျပီး ေျပာင္းသြားတဲ့ အတြက္ Output ေတြလည္း ‘Good Bye’ ဆိုျပီး ေျပာင္းလဲသြားမွာ ျဖစ္ပါတယ္။

Computed Vs Watched Property

VUE ဟာဆိုရင္ေတာ့ Data Changes ေတြ အတြက္ ပိုမိုအဆင္ေျပစြာ ေရးသားႏိုင္ေအာင္ လုပ္ေပးထားပါတယ္။

ဥပမာ Full Name ကို Output ထုတ္မယ္။ fullName ကို ရဖို႕ firstName နဲ႕ lastName ကို Concat ရမယ္ဆိုပါေတာ့။

HTML Code



Long Method : {{ fullName }}

 

Short Method : {{ fullName }}

 

ပထမ တစ္နည္း ကေတာ့ fullName ရဖို႕ firstName နဲ႕ lastName ကို ‘watch’ Method ေအာက္မွာ concat လုပ္ျပီး ထုတ္ထားျခင္း ျဖစ္ပါတယ္။

JS Code ( Using ‘watch’ Method )


window.onload = function () {
	// Using Watch Method
	var vm1 = new Vue({
		el: '#demo',
	 	data: {
			firstName: 'Foo',
		lastName: 'Way',
			fullName: 'Foo Way'
	 	},
		watch: {
			firstName: function (val) {
			this.fullName = val + ' ' + this.lastName
		},
		lastName: function (val) {
				this.fullName = this.firstName + ' ' + val
			}
		}
	})

	$('button').click(function(){
		vm1.firstName = "Long";
		vm1.lastName= "Name";
	});
}

ဒုတိယ တစ္နည္းျဖစ္တဲ့ ‘computed’ နည္းကို သံုးမယ္ဆိုရင္ ပိုမိုလြယ္ကူျပီး output က ေတာ့ အတူတူဘဲ ထြက္မွာ ျဖစ္ပါတယ္။

JS Code ( Using ‘computed’ Method )


window.onload = function () {
	// Using Computed Method
	var vm2 = new Vue({
		el: '#demo2',
		data: {
			firstName: 'Foo',
			lastName: 'Way'
		},
		computed: {
				fullName: function () {
					return this.firstName + ' ' + this.lastName;
				}
		  	}
		})

	$('button').click(function(){
		vm2.firstName = "Short";
		vm2.lastName= "Way";
	});
}

Computed Setter ( get & set events )

ဒါကေတာ့ computed properties မွာ get event နဲ႕ set event ေတြကို ထည့္သြင္း အသံုးျပဳမွာ ျဖစ္ပါတယ္။
‘get’ event ဆိုတာ output ကို ရယူတာျဖစ္ျပီး ‘set’ event ကေတာ့ ကိုယ္လိုခ်င္တဲ့ output ရဖို႕ value ထည့္ေပးျခင္း ျဖစ္ပါတယ္။
ဥပမာ – var a = ‘Aung’; // set
alert(a); // get

HTML Code



{{ firstName }} : {{ lastName }} = {{ fullName }}

 

JS Code


window.onload = function () {
	
	var vm1 = new Vue({
		el: '#demo',
	 	data: {
	 		firstName: '',
	 		lastName : ''
	 	},
		computed: {
			fullName: {
				// get event
				get: function () {
					return this.firstName + ' ' + this.lastName
				},
				// set event
				set: function (newValue) {
					 var names = newValue.split(' ')
					this.firstName = names[0]
					this.lastName = names[names.length - 1]
				}
			}
		}
	})

	vm1.fullName = 'Kyaw Kyaw';

	$('button').click(function(){
		vm1.fullName = 'Hla Pyoe';
	});

}

ဒီ JS Code မွာ ဆိုရင္ေတာ့ ‘fullName’ properties ကို ‘get’ method မွာ first name နဲ႕ second name ကို concat လုပ္ျပီး return ျပန္ထားျပီး ‘set’ method မွာ ဆိုရင္ေတာ့ fullName တန္ဖိုး ေပးလိုက္ျပီး firstName နဲ႕ lastName ကို ေျပာင္းလဲလိုက္တာ ျဖစ္ပါတယ္။

Computed Properties ၊ Watcher ၊ ‘get’ ‘set events မ်ားအတြက္ Source Code မ်ားကို download ဆြဲျပီး ေလ့လာႏိုင္ပါတယ္။

Class and Style Bindings

DOM Element ေတြရဲ႕ CSS Style ေတြ Inline Style ေတြကို VUE JS က တဆင့္ ထိန္းခ်ဳပ္ဖို႔အတြက္ အသံုးျပဳႏိုင္ပါတယ္။ Style Bindings ဆိုတဲ့အတိုင္း CSS Style ေတြကို VUE JS ကို အသံုးျပဳျပီး value မ်ားနဲ႕ bind ျပီး သံုးလို႔ ရသလို condition မ်ားနဲ႕လည္း ထိန္းခ်ဳပ္ႏိုင္မွာ ျဖစ္ပါတယ္။

Syntax for Style Bindings

HTML Code





 

Inline CSS

 

JS Code


window.onload = function () {
	new Vue({
		el: '#example',
		data : {
			activeColor : 'red',
			fontSize : 12
		}
	})
}

Style Bindings လုပ္မယ္ဆိုရင္ js မွာ vue data ရဲ႕ object key name ကို ကိုယ္လုပ္မယ့္ style ရဲ႕ value နဲ႕ တူေအာင္ ေပးထားလိုက္ျပီး v-bind လို႕ ေရးလိုက္တာနဲ႕ style bindings ျဖစ္သြားပါတယ္။

Style Object Bindings

သူကေတာ႔ style ေတြ တစ္ခုခ်င္းစီ inline မွာ မေရးေတာ့ဘဲ js မွာဘဲ data တစ္ခုေအာက္ စုေရးျပီးေတာ့ အဲ့ data object ကို v-bind သံုးျပီး ျပန္ေခၚတာျဖစ္ပါတယ္။

HTML Code


	

		
Inline CSS

JS Code


window.onload = function () {
	
	new Vue({
		el: '#example',
		data : {
			styleObject : {
				color: 'red',
				fontSize : '12px'
			}
		}
	})

}

styleObject မွာဆိုရင္ေတာ့ ကိုယ္ေပးမယ့္ style မွာ style name ျဖစ္တဲ့ color တို႕ fontSize တို႔ကိုေတာ့ key name အေနနဲ႕ သတ္မွတ္ေပးရမွာျဖစ္ျပီး အဲ့ေနာက္မွာ ကိုယ္ သတ္မွတ္ခ်င္တဲ့ တန္ဖိုးကို ထည့္ေပးရတာ ျဖစ္ပါတယ္။
Output ကေတာ့ color က အနီ ျဖစ္ျပီး font အရြယ္အစားကေတာ့ 12 ျဖစ္ေနမွာ ျဖစ္ပါတယ္။ Output ႏွစ္ခုက တူေနမွာ ျဖစ္ေပမယ့္ ဒုတိယနည္းျဖစ္တဲ့ styleObject ကေတာ့ ပိုမို လြယ္ကူျပီး simple ျဖစ္ပါတယ္။

Multiple Style Objects Bindings

Multiple ဆိုတဲ့အတိုင္း styleObject ကို တစ္ခုမက ႏွစ္ခု သံုးခုကို တစ္ျပိဳင္တည္း ထည့္ေပးသည့္အခါ အသံုးျပဳႏိုင္ပါတယ္။

Class Style Bindings

Class Binding ကေတာ့ ‘class’ နာမည္ေတြကို ထိန္းခ်ဳပ္တဲ့အခါမွာ အသံုးျပဳတာျဖစ္ပါတယ္။

HTML Code


	

		
		
CSS Override


		
		
Multiple Inline CSS

JS Code


window.onload = function () {
	
	new Vue({
		el: '#example',
		data : {
			baseStyles : {
				color: 'white',
				backgroundColor : 'red',
				fontSize : '12px'
			},
			overridingStyles : {
				color: 'blue',
				paddingTop : '20px',
				fontWeight : 'bold',
				fontSize: '25px'
			}
		}
	})

}

ဒီ Code မွာဆိုရင္ေတာ့ baseStyles ဆိုတဲ့ Object နဲ႕ overridingStyles ဆိုတဲ့ Object ကို array ပံုစံ v-bind ကို သံုးျပီး လုပ္ထားျခင္း ျဖစ္ပါတယ္။ အဲ့မွာဆိုရင္ေတာ့ baseStyles နဲ႕ overridingStyles မွာ တူေနတဲ့ color နဲ႕ fontSize မွာ overridingStyles က တန္ဖိုးကိုဘဲ ယူမွာ ျဖစ္ပါတယ္။

CSS Style Binding မ်ားအတြက္ Source Code မ်ားကို ဤ ေနရာမွာ download ဆဲြျပီး ေလ့လာႏိုင္ပါတယ္။

အခုဆိုရင္ေတာ့ Methods နဲ႔ Properties အေၾကာင္း၊ Objects Binding ၊ Style Bindings ၊ Class Bindings ေတြ အေၾကာင္းကို ကၽြန္ေတာ္ သိထားသေလာက္ အတတ္ႏိုင္ဆံုး ရွင္းရွင္းလင္းလင္း ျဖစ္ေအာင္္ တင္ျပ ေရးသားထားျခင္း ျဖစ္ပါတယ္။ ေနာက္ဆက္လက္၍ က်န္ရိွေနေသးေသာ Condition Rendering ၊ v-For ( Looping ) နဲ႔ Components ေတြ အေၾကာင္းကို ေရးသားေပးသြားမွာ ျဖစ္တဲ့အတြက္၊ ဆက္လက္ ဖတ္ရႈေပးၾကပါဦးလို႕ တိုက္တြန္းလိုက္ပါရေစဗ်ာ။ စာဖတ္သူ အေပါင္း သာယာေသာ ေန႕ရက္ေလးေတြ ပိုင္ဆိုင္ၾကပါေစ။ အခုလို လာေရာက္ ဖတ္ရႈေပးတဲ့အတြက္လည္း ေက်းဇူးအထူးတင္ပါတယ္ ခင္ဗ်ာ။

Share
Hello