හැමෝටම ආයුබෝවන්, VueJs ගැන ලියන 3 වෙනි post එක තමයි මේ. කලින් post 2 කියවන්න ඇති කියල හිතනව. කියෙව්වෙ නැත්තම් මෙතනින් ගිහින් අනිවාර්යෙන්ම ඒ දෙකත් කියවන්න.
කලින් post කියෙව්වනම් ඔයාල දැන් දන්නව, කොහොමද Vue app එකක data store කරන්නෙ කියල සහ ඒ data අපේ web page එකේ display කරන්නෙ කියල. අද කියන්න යන්නෙ Vue directives ගැන.
මොනවද මේ Vue Directives කියන්නෙ?
ඔයා AngularJs ගැන දන්නවනම් directive ගැන දන්නව ඇති. Vue directive ත් ටිකක් ඒ වගේ. ඊට වැඩිය ගොඩක් ලේසියි. Vue directives කියන්නෙ, අපේ app එකේ භාවිතාවන HTML elements (DOM elements) control කරන්න භාවිතා කරන විශේෂ token වර්ගයකට. මේවයින් එක එක විදියෙ වැඩ කරගන්න පුළුවන්. condition වලට අනුව elements render කරන්න, loops, event handle කරන්න වගේ තව ගොඩක් වැඩ. v-model, v-if, v-bind, v-for, v-text, v-on මේ වගේ Vue directives තව ගොඩක් තියෙනව. මේවයින් මොනවද කෙරෙන්නෙ සහ කොහොමද මේව පාවිච්චි කරන්නෙ කියන එක මම ඔයාලට කියල දෙන්නම්.
Vue directive එකක් අඳුරගන්න එක ලේසියි, හැම තිස්සෙම v- කියල තමයි පටන් ගන්නෙ. කලින් post එකේ අන්තිමට මම දීපු උදාහරණයම v-text කියන directive එක පාවිච්චි කරල කරන්නෙ මෙහෙමයි.
<div id="my-app">
<h1 v-text="sayHello()"> </h1>
</div>
ඔයාලට පේනව ඇති directives හරියට HTML attributes වගේ. මේ v-text කියන directive එකෙන් කරන්නෙ එ්කට දෙන value එක අර element එක අැතුලෙ render කරන එක. ඉතිං මෙතනදි sayHello() කියන method එකෙන් එන String එක, value එක විදියට මම දීල තියෙනව. එතකොට ඒක h1 tag එක අැතුලෙ render වෙනව.
Data binding
මේක ටිකක් වැදගත් දෙයක්. හිතන්නකො මෙහෙම. මට ඕන වෙනව <a> tag එකක href attribute එකට, data object එකේ තියෙන website කියන data එක set කරන්න. ඒ වැඩේට අපි කියනව data bind කරනව කියල.
const app = new Vue({
el: '#my-app',
data: {
website: "http://www.google.com"
}
});
නිකන්ම,
<a href="website"> Google.com </a>
කියල ලිව්වට හරියන්නෙ නැහැ. මේ බලන්න.
එතකොට website කියන්නෙ නිකන්ම String එකක් විතරයි. ඒ නිසා අපි Vue වලට කියන්න ඕනෙ මේ href කියන attribute එකට, website කියන data එක bind කරන්න කියල. අපිට ඒක කරන්න පුළුවන් v-bind කියන directive එක භාවිතා කරල. v-bind එකේදි මේ වගේ syntax එකක් තමයි තියෙන්නෙ.
v-bind:attribute_name=”data“
v-bind: එකේ semicolon එකෙන් පස්සෙ තියෙන්නෙ (attribute_name කියන එක) අපි data bind කරන attribute එකේ නම. data කියන්නෙ ඒ attribute එකට bind කරන data එක. ඉතිං අපේ උදාහරණයෙ විදියට href එකට website කියන data එක bind කරන්නෙ මෙහෙමයි.
<div id="my-app">
<a v-bind:href="website">google</a>
</div>
මේකෙන් කියවෙන්නෙ href කියන attribute එකට, website කියන data එක bind කරන්න කියල. දැන් ඔයාලට පෙනෙයි href එකට හරියට url එක set වෙලා තියෙනව.
අපිට අවශ්‍ය ඕනම attribute එකකට අපිට අවශ්‍ය data එකක් bind කර ගන්න පුළුවන්. මේ විදියට data bind කරාට පස්සෙ, කොයි වෙලාවක හරි, අපි bind කරපු data එක වෙනස් උනොත්, ඒ මොහොතෙම, ඒක bind වෙලා තියෙන හැම තැනකම ඒක ඒ විදියටම වෙනස් වෙනව. 🙂
අපි තව උදාහරණයක් බලමු. input field එකකට data bind කරන්නෙ කොහෙමද කියල. මේකෙදි අපිට value කියන attribute එකට data bind කරන්නනෙ තියෙන්නෙ. මේවගේ,
<input type="text" v-bind:value="name">
එතකොට name කියන data එක text field එකේ පෙන්නනව. ඒකෙ කිසිම ප්‍රශ්නයක් නැහැ. හැබැයි මෙතන පොඩි අව්ලක් තියෙනව. ඒ තමයි, name කියන data එක text field එකේ පෙන්නුවට, අපි text field එකේ තියෙන එක දේ වෙනස් කරා කියල name කියන data එක වෙනස් වෙන්නෙ නෑ. ඒ කියන්නෙ one way data bind එකක් තමයි එතන වෙන්නෙ. text field එකේ තියෙන text එක වෙනස් කරද්දි name කියන data එකත් වෙනස් වෙන්න ඕන නම් (two way data binding) අපිට පුළුවන් v-model කියන directive එක භාවිතා කරන්න. v-model එක වැදගත් වෙන්නෙ මේ වගේ input field වලට. මේ විදියට.
app.js file
const app = new Vue({
el: '#my-app',
data: {
name: "John Doe",
}
});
#my-app div
<div id="my-app">
<h1 v-text="name"></h1>
<input type="text" v-model="name">
</div>
මේක browser එකේ run කරල බැල්වොත් ඔයාලට පෙනෙයි, text field එකේ type කරන එක එවලේම h1 tag එකේ render වෙනව. 😀
එතනදි වෙන්නෙ v-model directive එක පාවිච්චි කරපු නිසා, name කියන data එක text field එකත් එක්ක two way විදියට bind වෙලා තියෙන්නෙ. ඉතිං text field එකේ තියෙන දේ වෙනස් කරද්දි name කියන data එකත් එවලේම වෙනස් වෙනව. h1 tag එකටත්, මේ name කියන data එකම bind කරල තියෙන නිසා, name කියන data එක වෙනස් වෙද්දි, ඒකත් වෙනස් වෙනව. අනතිමේදි කොහොම හරි text field එකේ type කරන දේ ඒ මොහොතෙදිම h1 එක ඇතුලෙ පෙන්නනව. මේ දේ කරගන්න කොයිතරම් පොඩි code එකක්ද ලියන්න ඕන කියල ඔයාලට පේනව ඇති. මේ දේම normal JavaScript වලින් කරොත් කොච්චර ලොකු code එකක් ලියන්න ඕනෙද!
lists
දැන් බලමු list එකක තියෙන data කොහොමද page එකේ පෙන්නන්නෙ කියල. ඒකට v-for directive එක පාවිච්චි කරන්න පුළුවන්. මේ තියෙන්නෙ මගේ data object එක.
data: {
colors: [
{name: 'Blue', like: true},
{name: 'Red', like: false},
{name: 'Yellow', like: true},
{name: 'Green', like: true},
{name: 'Pink', like: false}
],
}
මේ colors list එකේ තියෙන colors වල name ටික, අපිට page එකේ <ul> </ul> එකක පෙන්නන්න ඕනෙ කියල හිතමු. අපිට පුළුවන් ඒක මේ විදියට කරන්න.
<div id="my-app">
<ul>
<li v-for="color in colors"> {{ color.name }}</li>
</ul>
</div>
v-for directive එක හරියට for loop එක වගේ. මෙතනදි වෙන්නෙ colors කියන list එක දිගේ loop වෙන එක. ඒ එක එක අවස්ථාවෙදි, list එකේ තියෙන එක එක element එක, color කියන variable එකට pass වෙනව. දැන් මට පුළුවන්, එක එක color එකේ name එක color.name කියල access කරන්න.
මේත් එකකම මම කියන්නම් v-if එක ගැනත්. ඒකෙන් පුළුවන් condition එකකට අනුව DOM element render කරන්න. මම කලින් code එකම පොඩ්ඩක් වෙනස් කරන්නම්.
<div id="my-app">
<ul>
<li v-for="color in colors" v-if="color.like"> {{ color.name }} </li>
</ul>
</div>
මේකෙදිත් කලින් වගේම list එක දිගේ loop වෙනව. ඒත් v-if එකෙන් check කරල බලනව, ඒ එක එක color එකේ like කියන property එක true ද කියල. true නම් විතරක් render කරනව.
directives වර්ග තව ගොඩක් තියෙනව. දැනට වැදගත්වෙන ඒව කීපයක් ගැන තමයි ඔය කිව්වෙ. අදට මේ ටික ඇතිවෙයි කියල හිතනව. ඊළඟ post එකෙන් බලමු events එක්ක වැඩකරන හැටි. මොනව හරි අව්ලක් තියෙනම් comment එකක් දාන්න.