Vue.js ප්‍රධාන වශයෙන් අවධානය යොමු කරන්නේ යෙදුමේ දෘශ්‍යකරණ කොටස කෙරෙහි වන අතර එය ඉදිරිපස සංවර්ධනය ලෙසද හැඳින්වේ. Vue.js දිනෙන් දින ජනප්‍රිය වන්නේ වෙනත් ව්‍යාපෘති සහ පුස්තකාල සමඟ ඒකාබද්ධ වීම ඉතා පහසු බැවිනි. එය ස්ථාපනය කිරීම සහ භාවිතා කිරීම ඉතා සරල ය.
Vue.js යනු ප්‍රගතිශීලී JavaScript රාමුවකි විවෘත කේතයකි අන්තර්ක්‍රියාකාරී වෙබ් පරිශීලක අතුරුමුහුණත් සහ තනි පිටු යෙදුම් (SPAs) සංවර්ධනය සඳහා භාවිතා කරයි. Vue.js සාමාන්‍යයෙන් Vue ලෙස හඳුන්වන අතර "view.js" හෝ "view" ලෙස උච්චාරණය කෙරේ.
තනි පිටු යෙදුමක් හෝ SPA යනු ඩෙස්ක්ටොප් යෙදුමකට සමාන ඉතා සුමට, ප්‍රතිචාරාත්මක සහ වේගවත් අත්දැකීමක් පරිශීලකයින්ට සපයන වෙබ් යෙදුමක් හෝ වෙබ් අඩවියකි. තනි පිටුවක යෙදුමක මෙනුවක්, බොත්තම් සහ තනි පිටුවක කුට්ටි අඩංගු වේ. පරිශීලකයෙකු ඒවායින් එකක් මත ක්ලික් කළ විට, එය සේවාදායකයකින් සම්පූර්ණ නව පිටු පූරණය කරනවාට වඩා වත්මන් පිටුව ගතිකව නැවත ලියයි. එහි ප්‍රතිචාරාත්මක වේගය පිටුපස ඇති හේතුව මෙයයි.
Vue මූලික වශයෙන් ඉදිරිපස සංවර්ධනය සඳහා ගොඩනගා ඇත, එබැවින් එයට HTML, JavaScript සහ CSS ගොනු විශාල ප්‍රමාණයක් හැසිරවීමට සිදුවේ. Vue.js පරිශීලකයින්ට විධාන ලෙස හැඳින්වෙන HTML උපලක්ෂණ සමඟින් HTML දිගු කිරීම පහසු කරයි. Vue.js විසින් නිර්මිත විධාන සහ බොහෝ විධාන සපයයි defiHTML යෙදුම්වල ක්‍රියාකාරීත්වය වැඩි දියුණු කිරීම සඳහා පරිශීලකයා විසින් nite.
Vue.js හි වඩාත් වැදගත් විශේෂාංග ලැයිස්තුව පහත දැක්වේ:
Vue.js සංරචක මෙම රාමුවේ වැදගත් අංගයන්ගෙන් එකකි. ඒවා නැවත භාවිත කළ හැකි කේත සංග්‍රහ කිරීමට මූලික HTML මූලද්‍රව්‍ය දිගු කිරීමට භාවිත කෙරේ. ඔබට පසුව HTML හි නැවත භාවිත කළ හැකි Vue.js යෙදුම්වල නැවත භාවිත කළ හැකි අභිරුචි අංග සෑදිය හැක.
Vue.js විසින් විදැහුම් කරන ලද DOM Vue නිදර්ශන දත්ත සමඟ සම්බන්ධ කිරීමට භාවිත කළ හැකි HTML-පාදක සැකිලි සපයයි. සියලුම Vue සැකිලි වලංගු HTML වන අතර ඒවා විශේෂිත-අනුකූල බ්‍රව්සර් සහ HTML විග්‍රහ කරන්නන් මගින් විග්‍රහ කළ හැක. Vue.js අථත්‍ය DOM විදැහුම්කරණ ශ්‍රිතවලට ආකෘති සම්පාදනය කරයි. Vue බ්‍රවුසරය නැවුම් කිරීමට පෙර සංරචක අතථ්‍ය DOM මතකයට ලබා දෙයි. Vue හට නැවත විදැහුම් කිරීම සඳහා අවම සංරචක සංඛ්‍යාව ගණනය කළ හැකි අතර යෙදුම් තත්ත්වය වෙනස් කිරීමේදී අවම DOM හැසිරවීමේ ප්රමාණය යෙදිය හැක.
Vue සරල ජාවාස්ක්‍රිප්ට් වස්තු භාවිතා කරන සහ නැවත විදැහුම්කරණය ප්‍රශස්ත කරන ප්‍රතිචාරාත්මක පද්ධතියක් සපයයි. මෙම ක්‍රියාවලියේදී, සෑම සංරචකයක්ම එහි ප්‍රතික්‍රියාශීලී පරායත්තතා නිරීක්ෂණය කරයි, එබැවින් පද්ධතිය නැවත විදැහුම් කළ යුත්තේ කවදාද සහ කුමන සංරචකදැයි හරියටම දනී.
පිටු සංචලනය Vue-router ආධාරයෙන් සිදු කෙරේ. ඔබට ඔබගේ තනි පිටු යෙදුම සඳහා නිල වශයෙන් සහාය දක්වන Vue-router පුස්තකාලය භාවිතා කළ හැක.
Vue මඟින් මූලද්‍රව්‍ය ඇතුළු කරන විට, යාවත්කාලීන කරන විට හෝ DOM වෙතින් ඉවත් කරන විට විවිධ සංක්රාන්ති බලපෑම් භාවිතා කිරීමට ඔබට ඉඩ සලසයි.
Vue.js භාවිතා කිරීමට ක්රම කිහිපයක් තිබේ. ඔබට එහි නිල වෙබ් අඩවියට යාමෙන් එය ස්ථාපනය කළ හැකිය, නැතහොත් CDN පුස්තකාලයෙන් Vue.js ගොනුව භාවිතා කිරීම ආරම්භ කළ හැක. ඔබේ ව්‍යාපෘතිය තුළ Vue.js භාවිත කිරීමට ක්රම කිහිපයක් මෙන්න.
ඔබට ටැග් භාවිතා කිරීමට අවශ්‍ය නම් <script> Vue.js හි සෘජුවම ඔබගේ HTML ගොනුවට, ඔබ එය නිල වෙබ් අඩවියෙන් බාගත කළ යුතුය.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> අපි Vue.js නිල වෙබ් අඩවියට යමු https://vuejs.org/v2/guide/installation.html ඔබගේ අවශ්‍යතා අනුව vue.js බාගත කිරීමට.
ඔබට ඔබේ යෙදුම තුළ CDN වෙතින් Vue.js ගොනුව ද භාවිත කළ හැක. මූලද්‍රව්‍යය ඇතුළත https://unpkg.com/vue@3/dist/vue.global.js සබැඳිය භාවිත කරන්න <script>, පහත පරිදි:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js යනු වෙබ් සංවර්ධනය සහ තනි පිටු යෙදුම් (SPA) ගොඩනැගීම සඳහා බහුලව භාවිතා වන නවතම මෘදුකාංග තාක්ෂණයකි. ඔබට නමෙන් අනුමාන කළ හැකි පරිදි, එය බොහෝ දුරට ව්‍යාපෘතියේ UI හෝ සංදර්ශක පැත්ත සඳහා භාවිතා වේ.
ඔබගේ ව්‍යාපෘතියේ Vue.js භාවිතා කිරීමේ ප්‍රතිලාභ බලමු:
Vue.js හි ඇති ලොකුම වාසිය නම් එය ප්‍රමාණයෙන් ඉතා කුඩා වීමයි. ජාවාස්ක්‍රිප්ට් රාමුවක සාර්ථකත්වය බොහෝ දුරට රඳා පවතින්නේ එහි ප්රමාණය මත වන අතර මෙම උද්යෝගිමත් ජාවාස්ක්‍රිප්ට් ප්ලගිනය 18-21KB පමණි, එබැවින් ඔබට ඉතා පහසුවෙන් බාගත කර කෙටි වේලාවකින් එය භාවිතා කළ හැකිය.
Vue.js රාමුව ඉතා සරල ව්යුහයක් ඇති අතර එය තේරුම් ගැනීමට ඉතා පහසු වේ. එය මෙම රාමුවේ ජනප්‍රියතාවයට එක් හේතුවක්. ඔබ HTML සහ JavaScript ගැන හුරුපුරුදු නම්, ඔබට පහසුවෙන් Vue.js හි කේත කළ හැක. Vue.js එහි සරල ව්‍යුහය නිසා පරිශීලකයින්ට ඔවුන්ගේ වෙබ් ව්‍යාපෘතියට පහසුවෙන් එකතු කර යෙදුම් සංවර්ධනය කළ හැකිය.
Vue.js සෑම දෙයක් සඳහාම බොහෝ සංරචක ඇති අතර පවතින යෙදුම් සමඟ ඉතා ඉක්මනින් ඒකාබද්ධ කළ හැකිය. ඔබට එය JavaScript හි ලියා ඇති ඕනෑම යෙදුමක් සමඟ ඒකාබද්ධ කළ හැකිය.
Vue.js හි නම්‍යශීලී ස්වභාවය React.js, Angular.js, සහ වෙනත් ඕනෑම නව JavaScript රාමු වල සංවර්ධකයින්ට තේරුම් ගැනීමට පහසු කරයි. එය HTML ගොනු, ජාවාස්ක්‍රිප්ට් ගොනු සහ පිරිසිදු ජාවාස්ක්‍රිප්ට් ගොනු ලිවීමට අතථ්‍ය නෝඩ් භාවිතා කිරීමට බොහෝ නම්‍යශීලී බවක් ලබා දෙයි.
ඔබට Vue.js යෙදුම්වල නැවත භාවිත කළ හැකි අභිරුචි අංග සෑදිය හැක.
Vue.js ඉතා සරල, සම්පූර්ණ සහ සවිස්තරාත්මක ලියකියවිලි සපයයි, එබැවින් HTML සහ JavaScript ගැන එතරම් අදහසක් නොමැති සංවර්ධකයින්ට එය වැඩසටහන් කිරීමට භාවිතා කළ හැකිය.
Vue.js ReactJS, Ember වැනි අනෙකුත් පවතින රාමු වලට සමාන අථත්‍ය DOM භාවිතා කරයි. අතථ්‍ය DOM යනු මුල් HTML DOM හි සැහැල්ලු-මතක වෘක්ෂ නියෝජනයක් වන අතර එය ආරම්භක DOM වලට බලපෑමක් නොකර යාවත්කාලීන වේ.
Vue.js HTML බ්ලොක් හැසිරවීම සරල කරන එහි Model View View Model (MVVM) ගෘහ නිර්මාණ ශිල්පය සමඟ ද්වි-මාර්ග සන්නිවේදනය සපයයි.
රාමුව සරල සහ සරල ආදර්ශ සින්ටැක්ස් භාවිතයෙන් DOM වෙත දත්ත ප්‍රකාශනාත්මකව ලබා දීමට ඉඩ සලසන පද්ධතියක් සමඟ පැමිණේ.
මෙන්න උදාහරණයක්:
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
</script>
</body>Vue.js රාමුව අපට ඉඩ දෙයි defiHTML යෙදුම් සඳහා ක්‍රියාකාරීත්වය සැපයීමට භාවිතා කරන විධාන ලෙස හඳුන්වන nire HTML ගුණාංග.
Vue.js හි විධාන වර්ග දෙකක් තිබේ:
Vue.js දත්ත සඳහා ස්ථාන දරන්නන් ලෙස ද්විත්ව වරහන් {{}} භාවිතා කරයි, සහ Vue.js විධාන යනු v- උපසර්ගයක් භාවිතා කරන HTML උපලක්ෂණ වේ.
Vue යෙදුමක් තනි DOM මූලද්‍රව්‍යයකට සම්බන්ධ වන අතර එය සම්පූර්ණයෙන්ම පාලනය කරයි. ඉහත උදාහරණයේ, එය #app වේ.
Vue සමඟින් අපට HTML ප්‍රවේශ ලක්ෂ්‍යය ලෙස සැලකිය හැකි අතර අනෙක් සියල්ල සිදු වන්නේ සාදන ලද Vue අවස්ථාව තුළය.
අපි මූලද්‍රව්‍ය උත්සාහ කරන උදාහරණයක් බලමු සහ බන්ධන ගුණාංග:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html> මෙම අවස්ථාවෙහිදී, නව v-bind ගුණාංගය වන්නේ විධානයයි. විධානයන් Vue විසින් සපයනු ලබන අද්විතීය ගුණාංග බව දැක්වීමට v- උපසර්ගයක් සමඟ භාවිතා කරනු ලබන අතර, විදැහුම් කරන ලද DOM වෙත විශේෂ ප්‍රතිචාරාත්මක හැසිරීමක් යෙදීමට භාවිතා කරයි.
උදාහරණයේ ප්රතිඵලය පහත දැක්වේ
Ercole Palmeri
Apple Vision Pro වාණිජ නරඹන්නා භාවිතයෙන් අක්ෂි ශල්‍යකර්මයක් Catania Polyclinic හි සිදු කරන ලදී.
වර්ණ ගැන්වීම හරහා සියුම් මෝටර් කුසලතා වර්ධනය කිරීම ලිවීම වැනි වඩාත් සංකීර්ණ කුසලතා සඳහා දරුවන් සූදානම් කරයි. වර්ණ ගැන්වීමට...
නාවික අංශය සැබෑ ගෝලීය ආර්ථික බලවතෙකු වන අතර එය බිලියන 150 ක වෙළඳපලක් කරා ගමන් කර ඇත.
පසුගිය සඳුදා ෆිනෑන්ෂල් ටයිම්ස් OpenAI සමඟ ගිවිසුමක් නිවේදනය කළේය. FT එහි ලෝක මට්ටමේ පුවත්පත් කලාවට බලපත්‍ර ලබා දෙයි…
