JavaScript – The SIGMA https://danushka96.github.io/sigma/ <For Those Who Code/> Sat, 02 Mar 2019 16:57:34 +0000 en-US hourly 1 https://wordpress.org/?v=5.1.1 VueJs 2 – 02 Vue object instance එකක් හදමු https://danushka96.github.io/sigma/index.php/2018/04/11/vuejs-2-02/ https://danushka96.github.io/sigma/index.php/2018/04/11/vuejs-2-02/#respond Wed, 11 Apr 2018 11:50:26 +0000 https://danushka96.github.io/sigma/?p=677 Reading Time: 3 minutes හැමෝටම ආයුබෝවන්, අද පාඩම VueJs 😀 . කලින් post එකක මම vue සහ SPA ගැන පොඩි හැඳින්වීමක් කරානෙ. ඒකෙදි මම කිව්ව Vue වලින් වැඩ කරන හැටි ගැන, ඉදිරි post එකකදි කියල දෙනව කියල. ඉතින් අද post එකෙන් මම බලාපොරොත්තු වෙනව Vue object එක ගැන ඔයාලට කියල දෙන්න. හරි අපි මේක මෙහෙම පටන් Read more…

The post VueJs 2 – 02 Vue object instance එකක් හදමු appeared first on The SIGMA.

]]> Reading Time: 3 minutes

හැමෝටම ආයුබෝවන්, අද පාඩම VueJs 😀 . කලින් post එකක මම vue සහ SPA ගැන පොඩි හැඳින්වීමක් කරානෙ. ඒකෙදි මම කිව්ව Vue වලින් වැඩ කරන හැටි ගැන, ඉදිරි post එකකදි කියල දෙනව කියල. ඉතින් අද post එකෙන් මම බලාපොරොත්තු වෙනව Vue object එක ගැන ඔයාලට කියල දෙන්න.

හරි අපි මේක මෙහෙම පටන් ගමු. අපි vue app එකක් ලියද්දි ඉස්සෙල්ලම කරන්න ඕනෙ අලුතින් vue object instance එකක් හදාගන්න එක. (මේ code එක ලියන්නෙ app.js කියන file එකේ.)

const app = new Vue({});

මේ object එක Vue වලින් අපිට දීපු එකක්. මේ instance එකෙන් තමයි අපේ app එක handle කරන්නෙ. ඔයාලට ඕනෙ නම් ඔයාලගෙ සම්පූර්ණ app එකම මේ එක object එකෙන් control කරන්න පුළුවන්. එහෙම නැත්තම් app එක කොටස් කීපයකට වෙන් කරල, ඒ එක එක කොටස, වෙන වෙනම Vue instance කිහිපයකින් control කරවන්න පුළුවන්.

මේ Vue instance එකට argument එකක් විදියට object එකක් pass කරන්න ඕනෙ. ඒ object මගින් තමයි app එකට අදාල data, methods ආදී සියළුම විස්තර අපි pass කරන්නෙ.

mounting the application

මම මේකෙ පළවෙනි property එක විදියට el කියල එකක් දෙනව (el කියන්නෙ element කියන එක කෙටි කරල). el කියන්නෙ String එකක්. ඒකෙන් කරන්නෙ app එක mount වෙන්නෙ මොන element එකේද කියල කියන එක. ඒ කියන්නෙ අපි app එකේ ලියන හැමදේම අන්තිමට render වෙලා පෙන්නන්නෙ මේ element එක ඇතුලෙ. ඒකෙන් පිට තියෙන දේවල් අපිට මේ Vue object එකෙන් control කරන්න බැහැ. සාමාන‍්‍යන් el එක විදියට දෙන්නෙ empty div element එකක id එක. එතකොට Vue වලින් ඒ element එක හොයාගෙන, ඒක ඇතුලෙ, අපි හදන app එක render කරනව. (react, angular වලදිත් මේ වගේම දෙයක් කරනවනෙ)

මම මේ පහළ උදාහරණයෙදි කරල තියෙන්නෙ, my-app කියල id එක තියෙන element එකකට අපේ app එක mount කරන එක.

const app = new Vue({
    el: '#my-app'
});

ඔයාලට මතකද කලින් post එකේ තිබ්බ basic html එක. ඔයාලට පේනව ඇති my-app කියල id එක තියෙන div element එකක් ඒකෙ තියෙනව. මේ element එකට තමයි අපේ Vue app එක mount කරන්නෙ. ඒක තේරෙන්න ඇති කියල හිතනව.

data

app එකේදි අවශ්‍ය වන සියළුම data store කරගන්න data කියල property එකක් භාවිතා කරනව. data කියන්නෙ object එකක්. ඒ object එක ඇතුලෙ අපිට අවශ්‍ය ඕනෑම type එකක (String, number, array, object) data, key-value pairs විදියට store කරගන්න පුළුවන්. උදාහරණයක් විදියට name කියල String එකක්, age කියල number එකක් සහ array එකක් store කරගන්නෙ මේ විදියට.

const app = new Vue({
    el: '#my-app',
    data: {
        name: 'John Doe',
        age: 28,
        colors: ['Red', 'Blue', 'Pink', 'White', 'Green']
    }
});

මෙතනදි මම මේ data මේ විදියට hard code කරාට ඇත්තටම, AJAX request වලින් වගේ තමයි මේව එන්නෙ. ඒව කරන විදිය පස්සෙ බලමු. දැනට මේ විදියට තියමු.

මෙහෙම store කරපු data, web page එකේ display කරන එක පහසු වැඩක්. හිත්නකො name කියන data එක මට page එකේ display කරන්න ඕනෙ කියල. හැබැයි මට ඒක display කරන්න පුළුවන් my-app කියන div එක ඇතුලෙ විතරයි.(මොකද මේ app එක mount කරල තියෙන්නෙ ඒ element එකට නිසා.) Data display කරන්න මේවගේ (mustache-like) syntax එකක් භාවිතා කරනව.

{{ name } }

මෙතනදි this.data.name හෝ vue.name වගේ කිසිවක් අවශ්‍ය වෙන්නෙ නැහැ. කෙලින්ම double සඟල වරහන් ඇතුලෙ data එකේ නම විතරයි ලියන්න ඕනෙ. එතකොට Vue වලින් ඉබේම අර data object එකේ තියෙන name කියන data එක එතන render කරනව.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue demo</title>
</head>
<body>
    <div id="my-app">
        <h1> {{ name }} </h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

ඔයාලගෙ index.html එකේ සහ app.js file එකේ මේ උඩ දීල තියෙන code දෙක enter කරල, index.html file එක browser එකකින් open කරල බලන්නකො. මේ වගේ output එකක් පෙනේවි.

 

example output

ඔයාලට පේනවනෙ, අර සඟල වරහන් මොනවත් පෙන්නන්නෙ නෑ. data එක විතරක් render කරල පෙන්නනව. ඔයාලට ඕන නම්, අර h1 tag එක my-app div එකට එළියෙන් ලියල බලන්න. එ්ක මේ විදියට render වෙන එකක් නැහැ.

methods

app එකේ භාවිතාවන සියළුම methods store කරල තියාගන්න, methods කියල property එකක් Vue instance එක ඇතුලෙ හදන්න පුළුවන්. methods කියන්නෙ object එකක්. අපි app එකේ පාවිච්චි කරන සියළුම methods මේ object එක ඇතුලෙ තමයි තියන්න ඕනෙ. උදාහරණයකට, මට ඕන වෙනව මෙන්න මේ method එක මගේ app එකේ භාවිතා කරන්න.

function sayHello() {
    return "Hello, " + name;
}

මම මේක define කරන්න ඕන methods කියන object එක ඇතුලෙ. මේක අර කලින් උදාහරණය ඇතුලෙම define කරොත් මේ වගේ තමයි තියෙන්න ඕනෙ.

const app = new Vue({
    el: '#my-app',
    data: {
        name: 'John Doe',
        age: 28,
        colors: ['Red', 'Blue', 'Pink', 'White', 'Green']
    },
    methods: {
    	sayHello: function () {
    	    return "Hello, " + this.name;
    	}
    }
});

ඔයාලට පේනව ඇති sayHello කියන method එක ඇතුලෙ ඉඳන්, data object එක ඇතුලෙ තියෙන name කියන data එක. access කරල තියෙන විදිය. ඔව් අපිට මෙතනදි this.data.name කියන්නෙ නැතුව this.name කියල කෙලින්ම ගන්න පුළුවන්, මොකද Vue වලින් default ම context එක හදලයි තියෙන්නෙ.

මේ method එක මේ විදියට අපේ page එකේදි call කරන්න පුළුවන්.

<div id="my-app">
    <h1> {{ sayHello() }} </h1>
</div>

අදට මෙතනින් නවතිනව. දැන් ඔයාලට Vue වලින් වැඩ කරන විදිය ගැන චුටිටක් හරි තේරෙන්න ඇති කියල හිතනව. මොනවහරි අව්ලක් තියෙනම් comment එකක් දාන්න. ඊළඟ post එකෙන් බලමු Vue directives කියන්නෙ මොනවද කියල. ජය!

The post VueJs 2 – 02 Vue object instance එකක් හදමු appeared first on The SIGMA.

]]> https://danushka96.github.io/sigma/index.php/2018/04/11/vuejs-2-02/feed/ 0 VueJs 2 – 01 මොකද්ද මේ Vue කියන්නෙ? https://danushka96.github.io/sigma/index.php/2018/04/10/vuejs-2-01/ https://danushka96.github.io/sigma/index.php/2018/04/10/vuejs-2-01/#respond Tue, 10 Apr 2018 08:12:56 +0000 https://danushka96.github.io/sigma/?p=650 Reading Time: 4 minutes හැමෝටම ආයුබෝවන්! Web designing ගැන උනන්දුවක් දක්වන ඔයාලට අද මම කියල දෙන්න යන්නේ VueJs එහෙමත් නැත්තම Vue ගැන. මේ ගැන එක post එකකින් ලියල ඉවර කරන්න බැරි වෙයි. ඒ නිසා මේ ගැන post කීපයක්ම ලියන්න මම බලාපොරොත්තු වෙනව. ඔයාල මේ ගැන ඉගෙනව ගන්නනම් html, css, JavaScript කියන දේවල් ගැන යම් Read more…

The post VueJs 2 – 01 මොකද්ද මේ Vue කියන්නෙ? appeared first on The SIGMA.

]]> Reading Time: 4 minutes

හැමෝටම ආයුබෝවන්! Web designing ගැන උනන්දුවක් දක්වන ඔයාලට අද මම කියල දෙන්න යන්නේ VueJs එහෙමත් නැත්තම Vue ගැන. මේ ගැන එක post එකකින් ලියල ඉවර කරන්න බැරි වෙයි. ඒ නිසා මේ ගැන post කීපයක්ම ලියන්න මම බලාපොරොත්තු වෙනව. ඔයාල මේ ගැන ඉගෙනව ගන්නනම් html, css, JavaScript කියන දේවල් ගැන යම් තරමකට හෝ අවබෝධයක් තියෙන්න ඕනෙ.

VueJs

 

මොකද්ද මේ Vue කියන්නෙ?

Vue කියන්නෙ front-end JavaScript framework එකක්. ඒ කියන්නෙ මේක යොදා ගන්නෙ website එකේ front-end එක design කරන්න. ඒ කියන්නෙ මේක Run වෙන්නෙ අපේ web browser එකේ. ඒ නිසා database එකත් එක්ක ගනුදෙනු කරනව වගේ (back-end) වැඩ මේකෙන් කරන්න බැහැ. web site එකේ user ට පේන කොටස design කිරීම සහ ඒකත් එක්ක තියෙන user interactions handle කරන එක තමයි මේකෙන් කරන්න පුළුවන් වෙන්නෙ.

දැනට තියෙන ප්‍රසිද්ධම front-end frameworks 3 න් එකක් තමයි  VueJs කියන්නෙ.(ඉතිරි 2, reactJs සහ AngularJs). මේක මේ වෙද්දි ඉතා වේගයෙන් ජනප්‍රියත්වයට පත්වෙමින් පවතිනව.

React, angular වගේම SPAs (single page application) හදන්න මේක පාවිච්චි කරනව. ඔයා front-end frameworks වලට අලුත් කෙනෙක් නම් ඉසසෙල්ලම Vue ඉගෙන ගන්න එක පහසුවක් වෙයි. මොකද, react හෝ angular වලට වඩා Vue එක්ක වැඩ කරන එක ටිකක් ලේසියි.

⁣⁣මොකද්ද මේ SPA කියන්නෙ?

single page application

සාමාන්‍ය site එකක් හැදිල තියෙන්නෙ web page ගොඩකින්. අපි website එකක සැ⁣රි සරද්දි, page එකක ඉදල තවත් page එකකට යද්දි වෙන්නෙ, අලුතින්ම ඒ page එක අපේ browser එකට download වෙලා පෙන්නන එක. මෙතනදි සම්පූර්ණ page එකම අලුතින් download වෙන නිසා ටිකක් වෙලා ගතවෙනව.

හැබැයි SPA එකකදි වෙන්නෙ ටිකක් වෙනස් වැඩක්. මේවයිදි සැරටම JavaScript භාවිතා වෙනව. SPA එකක (බොහෝ විට) තියෙන්නෙ එක page එකයි. site එකෙන් වැඩි හරියක් ලියවිල ති⁣යෙන්නෙ JavaScript file වල. ඒ site එකක් ඉස්සෙල්ලම load වෙද්දි ඒ තනි page එක සමග js file ටික load වෙනව. ඊළගට user request වලට අනුව ඒ ඒ අවස්ථාවට අදාල page එක JavaScript වලින් render කරල දෙනව. ආපහු අලුතින් මුලු page එකම download වෙන්න ඕන නෑ. මොකද අර පළවෙනියටම page එක ⁣load කරද්දි හැම page එකම render කරන්න ඕන templates, JavaScript file එකක් විදියට download වෙන නිසා. ඒක නිකං හරියට මුලු site එකම එක පාර download උනා වගේ වැඩක්. හැබැයි මේ frameworks වලින් ඒ වැඩේ ඉතා කාර්යක්ෂමව කරල දෙනව.

ඉතින් මේකෙදි අර කලින් වගේ හැම තිස්සෙම අලුතෙන් page එකක් download (page reload) වෙන්නෙ නැති නිසා සෑහෙන්න speed එකකුත් තියෙනව.

Page reload කරන්නෙ නැති නිසා back-end එකත් එක්ක communicate කිරීම,  AJAX requests වලින් තමයි කරන්නෙ.(form submit කරන්න, database එකෙන් data අරගන්න ව‍ගේ වැඩ)

single page application

SPAs වලට තියෙන හොදම උදාහරණයක් තමයි gmail.com කියන්නෙ. ඔයාල gmail account එකට log වෙලා බලන්න, මොන page එකට ගියත් (inbox, settings, sent mail, etc…) ඒ සේරම එකම page එකේ render වෙන එක තමයි වෙන්නෙ.(page reload වීමක් ⁣වෙන්නෙ නෑ)

SPA එකක් කියන්නෙ මොකද්ද කියල දන්නෙ නැති අයට තමයි ඒ පොඩි හැදින්වීම කරේ. දැන් තේරෙනව ඇති කියල හිතනව.

basic html

හරි දැන් එහෙනං අපි බලමු Vue වලින් කොහොමද වැඩ කරන්නෙ කියල.

Vue ගැන ඉගෙන ගන්න හොදම තැනක් තමයි Vuejs.org කියන්නෙ. මේක තමයි official Vue documentation එක. ඔයාල මේකෙ installation section එකට ගිහින් බැලුවොත් බලා ගන්න පුලුවන්, කොහොමද ඔයාලගෙ site එකට Vue install කර ගන්නෙ කියල. තවම මූලිකම අදියරේ නිසා අපි දැනට CDN එකක් පාවිච්චි කරමු.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue demo</title>
</head>
<body>
    <div id="my-app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

මේක තමයි අපේ basic html එක වෙන්නෙ. මේක index.html කියල file එකක save කරගන්න. ඔයාලට පේනව ඇති මම මේකෙ Vue file එක CDN එකකින් add කරල තියෙනව. ඒ වගේම තව app.js කියල file එකකුත් link කරල තියෙනව. ඒ file එකේ තමයි අපි අපේ app එකට අදාල code එක ලියන්නෙ. ඉතිං app.js කියල file එකකුත් මේ folder එකේම හදාගන්න ඕනෙ. මේ file දෙක තමයි මූලිකවම අපිට ඕන වෙන්නෙ.

තව දෙයක් කියන්න ඕනෙ. හුඟ දෙනෙක් මේක දන්නවත් ඇති. ඒත් දන්නෙ නැති අයත් ඉන්න නිසා කියන්න ඕනෙ. මම කලිනුත් කිව්වනෙ මේ app එක run වෙන්නෙ browser එකේ කියල. ඒ නිසා අපි අපේ app එක debug කරන්න පාවිච්චි කරන්නෙත් browser එකම තමයි. ඒකට හොඳම browser එකක් තමයි google chrome. ඒත් ඔයාල කැමති browser එකක් පාවිච්චි කරන්න පුළුවන්.  keyboard එකේ F12 key එක එබුවාම console එක open වෙනව. අන්න ඒක අපිට සෑහෙන්න වටින tool එකක්. අපේ code එකේ error එකක් ආවොත් එහෙම ඔන්න ඔතනින් තමයි අපිට ඒක බලාගන්න පුළුවන් වෙන්නෙ.

 

console

මේක හරියට terminal/cmd එක වගේ එකක් ඒ නිසා ඕන නම් අපිට මේකෙ JavaScript code run කරල බලන්න පුළුවන්. try කරල බලන්න.

අද මම මීට වඩා දෙයක් කියන්න යන්නෙ නැහැ. මොකද මේ post එකෙන් මම බලාපොරොත්තු උනේ Vue සහ SPA ගැන පොඩි හඳින්වීමක් කරන්න විතරයි. ඊළඟ post එකේ ඉඳන් බලමු කොහොමද Vue වලින් වැඩ කරගන්නෙ කියල. මේ දේවල් ගැන මොනව හරි ප්‍රශ්න එහෙම තියෙනවනම් පහලින් comment එකක් දාන්න.

ඊළඟ post එකට මෙතනින් යන්න.

The post VueJs 2 – 01 මොකද්ද මේ Vue කියන්නෙ? appeared first on The SIGMA.

]]> https://danushka96.github.io/sigma/index.php/2018/04/10/vuejs-2-01/feed/ 0