හැමෝටම ආයුබෝවන්, අද පාඩම 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 එකක් පෙනේවි.
ඔයාලට පේනවනෙ, අර සඟල වරහන් මොනවත් පෙන්නන්නෙ නෑ. 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 කියන්නෙ මොනවද කියල. ජය!