မင်္ဂလာပါ။
ကျွန်တော့်နာမည်ကတော့ ကိုဌေးမင်းခေါင် ဖြစ်ပါတယ်။ ယခု Spiceworks Myanmar တွင် PHP Web Developer ဖြင့် အလုပ်လုပ်ကိုင်လျက်ရှိပါတယ်။ ဒီနေ့ ကျွန်တော် မိတ်ဆက်ပေးမှာကတော့ VUE နဲ့ ပတ်သက်၍ တတိယ အပိုင်းအနေဖြင့် ဗဟုသုတများကို မျှဝေပေးသွားမှာ ဖြစ်ပါတယ်။ အရင်က VUE Part 1, VUE 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 ဆိုပြီး မျှဝေပေးခဲ့ပြီး ဖြစ်ပါတယ်။

ယခု နောက်ဆုံးအနေနဲ့ Part 3 မှာတော့
1. Conditional Rendering
2. List Rendering ဆိုပြီး ခေါင်းစဉ်နှစ်ခုကို ကျွန်တော် သိသလောက် မျှဝေပေးသွားမှာဖြစ်ပါတယ်။
ယခု Part 3 မှာဆိုရင်တော့ အရင် VUE Part 1 နှင့် VUE Part 2 မှာ ရေးသားခဲ့သော syntax များကို ပြန်လည် ထည့်သွင်း မရေးတော့ဘဲ အဓိက Point တွေကိုဘဲ Code အနေနဲ့ ပြသွားမှာ ဖြစ်ပါတယ်။ အကယ်၍ သင်ဟာ VUE Part 1 နှင့် VUE Part 2 ကို မဖတ်ရသေးရင်တော့ ယခု Part 3 ကို သင် နားလည်မှာ မဟုတ်ပါဘူး။

1. Conditional Rendering
Conditional ဆိုတဲ့အတိုင်း မိမိသတ်မှတ်ထားသော elements များကို if condition များဖြင့် လုပ်ဆောင်စေရန် ဖြစ်ပါတယ်။ အောက်မှာ ဥပမာလေးနဲ့ ကြည့်လိုက်ရင် နားလည် သဘောပေါက်လာပါလိမ့်မယ်။

If တစ်ခုတည်းဖြင့် condition စစ်မယ်ဆိုရင်

 <h1 v-if="ok">Yes</h1>

အခု JS Code မှာဆိုရင်တော့ if condition တစ်ခုဖြင့် စစ်ထားပြီး ok statement က true ဆိုရင် Yes ဆိုပြီး ပေါ်မှာပါ။

If-else ဖြင့် condition စစ်မယ်ဆိုရင်

 <h1 v-if="ok">Yes</h1>
 <h1 v-else>No</h1>

အပေါ် Code မှာဆိုရင်တော့ ok statement က true ဆိုရင် Yes ဆိုပြီး ပေါ်မယ်။ false ဆိုရင် No ဆိုပြီး ပေါ်လာမှာပါ။

 <div v-if="Math.random() < 0.5">
	Now you see me
 </div>
 <div v-else>
	Now you don't
 </div>

Condition နှစ်ခုထက်မကဖြင့် စစ်မယ်ဆိုရင်
HTML Code :

<div v-if="type === 'A'">
	A
</div>
<div v-else-if="type === 'B'">
	B
</div>
<div v-else-if="type === 'C'">
	C
</div>
<div v-else>
	Not A/B/C
</div>

JS Code :

data : {
	type : ‘A’
}

Code မှာဆိုရင်တော့ type ဆိုတဲ့ data ကို ကြည့်ပြီး if condition ကို စစ်ထားတာ တွေ့ရမှာပါ။

အခုရှင်းပြထားသော if condition နဲ့ပတ်သက်ပြီး ပိုမိုသိရှိလိုပါက ဒီနေရာတွင် ဆက်လက်လေ့လာနိုင်ပါတယ်ခင်ဗျာ။

2. List Rendering
List Rendering ခေါင်းစဉ်အောက်မှာဆိုရင်တော့ for loop နဲ့ ပတ်သက်ပြီး ရှင်းပြပေးသွားမှာ ဖြစ်ပါတယ်။ for loop ဆိုသည့်အတိုင်း Array/Object ထဲတွင် ရှိသော item များကို Looping ပတ်၍ data ဆွဲထုတ်ခြင်း ဖြစ်ပါတယ်။

HTML Code :

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

JS Code :

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

Coding ထဲမှာဆိုရင် v-for ဖြင့် item in items ဆိုပြီး ပတ်ထားတာ ဖြစ်ပါတယ်။
ဒါ့ကြောင့် JS Code ထဲက data ထဲမှာ ရှိတဲ့ items ဆိုတဲ့ Array ထဲက item တွေကို ဆွဲထုတ်ပြီး li ကို Loop ပတ်ပြီး output ထွက်လာမှာ ဖြစ်ပါတယ်။

v-for ကို သုံးပြီး output မှာ index number ပါထည့်သွင်းမယ်။ loop ထဲမှာမပါသော data ပါ ထည့်သွင်းပြီး output အနေနဲ့ ထုတ်မယ်ဆိုရင်
HTML Code :

<ul id="example-2">
	<li v-for="(item, index) in items">
    		{{ parentMessage }} - {{ index }} - {{ item.message }}
	</li>
</ul>

JS Code :

var example2 = new Vue({
	el: '#example-2',
  	data: {
    		parentMessage: 'Parent',
    		items: [
      			{ message: 'Foo' },
      			{ message: 'Bar' }
   	 	]
  	}
});

items ဆိုတဲ့ data ထဲက message တွေကို v-for နဲ့ Loop ပတ်မယ်။ item, index ဆိုပြီး သုံးထားတဲ့အတွက် item ဆိုတာ loop item ထဲက data တွေဖြစ်ပြီး index ဆိုတာကတော့ index number ကို ထုတ်ပေးတာပါ။
Output :

v-for ကို Object များတွင် အသုံးပြုခြင်း
v-for ကို object တွင် အသုံးပြုမယ်ဆိုရင်တော့ v-for loop ပတ်မယ့်ဟာသည် object ဖြစ်ဖို့ လိုမှာဖြစ်ပါတယ်။

JS Code :

new Vue({
  	el: '#v-for-object',
  	data: {
    		object: {
      			firstName: 'John',
      			lastName: 'Doe',
      			age: 30
    		}
  	}
});

HTML Code:

Method 1:

<ul id="v-for-object" class="demo">
  	<li v-for="value in object">
    		{{ value }}
  	</li>
</ul>

Object နဲ့ ပတ်မယ်ဆိုရင် value in object ဆိုပြီး ရေးသားပေးရမှာ ဖြစ်ပါတယ်။ ဒါမှသာ object အတွင်းရှိ value ဆိုတဲ့ variable name နဲ့ ထွက်လာမှာ ဖြစ်ပြီး ၎င်း value ထဲတွင် object အောက်က dataတွေရဲ့ value တွေကို ထုတ်ပေးမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် output ကို ကြည့်မယ်ဆိုရင် object အောက်က attribute တွေရဲ့ value တွေကို ထုတ်ပြထားတာ တွေ့ရမှာ ဖြစ်ပါတယ်။
Output :

Method 2:

<div v-for="(value, key) in object">
	{{ key }}: {{ value }}
</div>

Method 2 ကို လေ့လာကြည့်မယ်ဆိုရင်တော့ value, key ဆိုပြီး ရေးထားတွေ့ရပါတယ်။ ဒါကြောင့် Method 1 နှင့် မတူဘဲ attribute ရဲ့ key ကိုပါ output ထုတ်ကြည့်ဖို့ ရေးထားတာဖြစ်ပါတယ်။
Output :

Method 3:

<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>

Method 3 မှာ ကြည့်မယ်ဆိုရင် value, key, index ဆိုပြီး သုံးခုရေးထားတာ တွေ့ရမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် index ဆိုတဲ့ name ပါနေတဲ့အတွက် index number ကိုပါ ထုတ်ကြည့်ဖို့ ရေးသားထားတာ ဖြစ်ပါတယ်။ index က သုညက စတာဖြစ်တဲ့အတွက် 0 1 2 ဆိုပြီး output မှာ တွေ့ရမှာ ဖြစ်ပါတယ်။
Output :

Method 4:

<div>
  	<span v-for="n in 10">{{ n }} </span>
</div>

Method 4 မှာဆိုရင်တော့ 10 ကို Loop ပတ်တာဖြစ်ပြီး output အနေနဲ့ တစ်ကနေ ၁၀ ထိ output ထုတ်ပေးမှာ ဖြစ်ပါတယ်။
Output:

ယခု ကျွန်တော် ရှင်းပြခဲ့သော v-for ကို ပိုမိုလေ့လာလိုပါက ဒီနေရာတွင် လေ့လာနိုင်ပါတယ်။

ယခု ရှင်းပြပေးခဲ့သော VUE JavaScript Framework Part 3 ကို စာဖတ်သူ ဗဟုသုတ တစ်ခုခုရရှိသွားလိမ့်မယ်လို့ မျှော်လင့်ပါတယ် ခင်ဗျာ။ ကျွန်တော် ရှင်းပြပေးခဲ့သော VUE JavaScript Framework အကြောင်းကို အသေးစိတ်လေ့လာလိုပါက VUE v2 Guide တွင် အသေးစိတ် ဖတ်ရှု လေ့လာနိုင်ပါတယ်။
ယခုလို အချိန်ပေးပြီး ဖတ်ရှုပေးတဲ့အတွက် ကျေးဇူးတင်ပါတယ် ခင်ဗျာ။