VUE JavaScript Framework ( Introduction Part

မင်္ဂလာပါ။ အရင်ဦးဆုံး ကျွန်တော် ကိုယ့်ကိုယ်ကို အရင် မိတ်ဆက်ပေးချင်ပါတယ် ခင်ဗျာ။
ကျွန်တော့်နာမည် ဌေးမင်းခေါင် ဖြစ်ပါတယ်။ ယခု 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

<div id="example">
 
{{ message.split('').reverse().join('') }}
 
<hr>
 
{{ message }}
 
<hr>
 
{{ reversedMessage }}
 
<hr>
 
<button>Change Value</button>
 
</div>

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

<div id="demo">Long Method : {{ fullName }}</div>
  
<div id="demo2">Short Method : {{ fullName }}</div>
  
<hr>
<button>Change Value</button>

ပထမ တစ်နည်း ကတော့ 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

<div id="demo">{{ firstName }} : {{ lastName }} = {{ fullName }}</div>
  
 
<hr>
 
<button>Change Value</button>

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

<div id="example">
 
  
<div>Inline CSS</div>
  
 
</div>

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

<div id="example">
    <div>Inline CSS</div>
</div>

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

<div id="example">
    <!--    Override baseStyles with overridingStyles
            if same CSS Attribute        -->
    <div>CSS Override</div>
 
    <!-- Multiple Array -->
    <div>Multiple Inline CSS</div>
</div>

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

“ To Impress Others By Works "

VUE JavaScript Framework ( Introduction Part – 2 )

Computed Properties and Methods

Computed Vs Watched Property

Computed Setter ( get & set events )

Class and Style Bindings

Syntax for Style Bindings

Style Object Bindings

Multiple Style Objects Bindings

Class Style Bindings

Leave a Reply Cancel reply