Vue.js പ്രധാനമായും ഫോക്കസ് ചെയ്യുന്നത് ആപ്ലിക്കേഷന്റെ വിഷ്വലൈസേഷൻ ഭാഗത്താണ്, ഇതിനെ ഫ്രണ്ട്-എൻഡ് ഡെവലപ്‌മെന്റ് എന്നും വിളിക്കുന്നു. മറ്റ് പ്രോജക്റ്റുകളുമായും ലൈബ്രറികളുമായും സംയോജിപ്പിക്കാൻ വളരെ എളുപ്പമായതിനാൽ Vue.js അനുദിനം ജനപ്രിയമായിക്കൊണ്ടിരിക്കുകയാണ്. ഇത് ഇൻസ്റ്റാൾ ചെയ്യാനും ഉപയോഗിക്കാനും വളരെ ലളിതമാണ്.
Vue.js ഒരു പുരോഗമന ജാവാസ്ക്രിപ്റ്റ് ചട്ടക്കൂടാണ് ഓപ്പൺ സോഴ്സ് ഇന്ററാക്ടീവ് വെബ് യൂസർ ഇന്റർഫേസുകളും സിംഗിൾ പേജ് ആപ്ലിക്കേഷനുകളും (എസ്പിഎ) വികസിപ്പിക്കുന്നതിന് ഉപയോഗിക്കുന്നു. Vue.js നെ സാധാരണയായി Vue എന്ന് വിളിക്കുകയും "view.js" അല്ലെങ്കിൽ "view" എന്ന് ഉച്ചരിക്കുകയും ചെയ്യുന്നു.
ഒരു ഡെസ്‌ക്‌ടോപ്പ് ആപ്ലിക്കേഷന് സമാനമായി ഉപയോക്താക്കൾക്ക് വളരെ സുഗമവും പ്രതികരണശേഷിയുള്ളതും വേഗതയേറിയതുമായ അനുഭവം നൽകുന്ന ഒരു വെബ് ആപ്ലിക്കേഷനോ വെബ്‌സൈറ്റോ ആണ് സിംഗിൾ പേജ് ആപ്ലിക്കേഷൻ അല്ലെങ്കിൽ SPA. ഒരൊറ്റ പേജ് ആപ്ലിക്കേഷനിൽ ഒരൊറ്റ പേജിൽ ഒരു മെനു, ബട്ടണുകൾ, ബ്ലോക്കുകൾ എന്നിവ അടങ്ങിയിരിക്കുന്നു. ഒരു ഉപയോക്താവ് അവയിലൊന്നിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, അത് ഒരു സെർവറിൽ നിന്ന് പുതിയ പേജുകൾ ലോഡുചെയ്യുന്നതിനുപകരം നിലവിലെ പേജ് ചലനാത്മകമായി മാറ്റിയെഴുതുന്നു. ഇതാണ് അതിന്റെ പ്രതികരണ വേഗതയ്ക്ക് പിന്നിലെ കാരണം.
Vue അടിസ്ഥാനപരമായി ഫ്രണ്ട്‌എൻഡ് വികസനത്തിന് വേണ്ടി നിർമ്മിച്ചതാണ്, അതിനാൽ ഇതിന് ധാരാളം HTML, JavaScript, CSS ഫയലുകൾ കൈകാര്യം ചെയ്യേണ്ടതുണ്ട്. ഡയറക്‌ടീവുകൾ എന്ന് വിളിക്കുന്ന HTML ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് ഉപയോക്താക്കൾക്ക് HTML വിപുലീകരിക്കുന്നത് Vue.js എളുപ്പമാക്കുന്നു. Vue.js അന്തർനിർമ്മിത നിർദ്ദേശങ്ങളും നിരവധി നിർദ്ദേശങ്ങളും നൽകുന്നു defiHTML ആപ്ലിക്കേഷനുകളുടെ പ്രവർത്തനക്ഷമത മെച്ചപ്പെടുത്തുന്നതിന് ഉപയോക്താവ് നൈറ്റ്.
Vue.js-ന്റെ ഏറ്റവും പ്രധാനപ്പെട്ട സവിശേഷതകളുടെ ലിസ്റ്റ് ചുവടെയുണ്ട്:
Vue.js ഘടകങ്ങൾ ഈ ചട്ടക്കൂടിന്റെ പ്രധാന സവിശേഷതകളിൽ ഒന്നാണ്. പുനരുപയോഗിക്കാവുന്ന കോഡ് കൂട്ടിച്ചേർക്കുന്നതിന് അടിസ്ഥാന HTML ഘടകങ്ങൾ വിപുലീകരിക്കാൻ അവ ഉപയോഗിക്കുന്നു. നിങ്ങൾക്ക് Vue.js ആപ്ലിക്കേഷനുകളിൽ പുനരുപയോഗിക്കാവുന്ന ഇഷ്‌ടാനുസൃത ഘടകങ്ങൾ സൃഷ്‌ടിക്കാം, അത് പിന്നീട് HTML-ൽ വീണ്ടും ഉപയോഗിക്കാനാകും.
Vue.js, റെൻഡർ ചെയ്ത DOM-നെ Vue ഇൻസ്റ്റൻസ് ഡാറ്റയുമായി ബന്ധപ്പെടുത്താൻ ഉപയോഗിക്കാവുന്ന HTML-അടിസ്ഥാന ടെംപ്ലേറ്റുകൾ നൽകുന്നു. എല്ലാ Vue ടെംപ്ലേറ്റുകളും സാധുവായ HTML ആണ്, അത് സ്പെക്ക്-കംപ്ലയന്റ് ബ്രൗസറുകൾക്കും HTML പാഴ്സറുകൾക്കും പാഴ്‌സ് ചെയ്യാൻ കഴിയും. Vue.js മോഡലുകളെ വെർച്വൽ DOM റെൻഡറിംഗ് ഫംഗ്ഷനുകളിലേക്ക് കംപൈൽ ചെയ്യുന്നു. ബ്രൗസർ പുതുക്കുന്നതിന് മുമ്പ് Vue ഘടകങ്ങളെ വെർച്വൽ DOM മെമ്മറിയിലേക്ക് റെൻഡർ ചെയ്യുന്നു. റീ-റെൻഡർ ചെയ്യുന്നതിനുള്ള ഏറ്റവും കുറഞ്ഞ ഘടകങ്ങളുടെ എണ്ണം കണക്കാക്കാനും ആപ്ലിക്കേഷൻ നില മാറ്റുമ്പോൾ DOM കൃത്രിമത്വത്തിന്റെ ഏറ്റവും കുറഞ്ഞ തുക പ്രയോഗിക്കാനും Vue-ന് കഴിയും.
ലളിതമായ JavaScript ഒബ്‌ജക്‌റ്റുകൾ ഉപയോഗിക്കുകയും റീ-റെൻഡറിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യുകയും ചെയ്യുന്ന ഒരു പ്രതികരണ സംവിധാനം Vue നൽകുന്നു. ഈ പ്രക്രിയയിൽ, ഓരോ ഘടകവും അതിന്റെ റിയാക്ടീവ് ഡിപൻഡൻസികളുടെ ട്രാക്ക് സൂക്ഷിക്കുന്നു, അതിനാൽ എപ്പോൾ, ഏതൊക്കെ ഘടകങ്ങൾ വീണ്ടും റെൻഡർ ചെയ്യണമെന്ന് സിസ്റ്റത്തിന് കൃത്യമായി അറിയാം.
വ്യൂ-റൗട്ടറിന്റെ സഹായത്തോടെയാണ് പേജ് നാവിഗേഷൻ ചെയ്യുന്നത്. നിങ്ങളുടെ സിംഗിൾ പേജ് ആപ്ലിക്കേഷനായി ഔദ്യോഗികമായി പിന്തുണയ്ക്കുന്ന വ്യൂ-റൂട്ടർ ലൈബ്രറി നിങ്ങൾക്ക് ഉപയോഗിക്കാം.
ഘടകങ്ങൾ ചേർക്കുമ്പോഴോ അപ്‌ഡേറ്റ് ചെയ്യുമ്പോഴോ DOM-ൽ നിന്ന് നീക്കം ചെയ്യുമ്പോഴോ വ്യത്യസ്ത സംക്രമണ ഇഫക്റ്റുകൾ ഉപയോഗിക്കാൻ Vue നിങ്ങളെ അനുവദിക്കുന്നു.
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>വെബ് ഡെവലപ്‌മെന്റിനും സിംഗിൾ പേജ് ആപ്ലിക്കേഷനുകൾ (SPA) നിർമ്മിക്കുന്നതിനും വ്യാപകമായി ഉപയോഗിക്കുന്ന ഏറ്റവും പുതിയ സോഫ്റ്റ്വെയർ സാങ്കേതികവിദ്യകളിലൊന്നാണ് Vue.js. പേരിൽ നിന്ന് നിങ്ങൾക്ക് ഊഹിക്കാൻ കഴിയുന്നത് പോലെ, ഇത് പ്രോജക്റ്റിന്റെ UI അല്ലെങ്കിൽ ഡിസ്പ്ലേ സൈഡിനായി ഉപയോഗിക്കുന്നു.
നിങ്ങളുടെ പ്രോജക്റ്റിൽ Vue.js ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ നോക്കാം:
Vue.js-ന്റെ ഏറ്റവും വലിയ നേട്ടങ്ങളിലൊന്ന് അതിന്റെ വലിപ്പം വളരെ ചെറുതാണ് എന്നതാണ്. ഒരു JavaScript ഫ്രെയിംവർക്കിന്റെ വിജയം അതിന്റെ വലുപ്പത്തെ ആശ്രയിച്ചിരിക്കുന്നു, മാത്രമല്ല ഈ ആവേശകരമായ JavaScript പ്ലഗിൻ 18-21KB മാത്രമാണ്, അതിനാൽ നിങ്ങൾക്ക് വളരെ എളുപ്പത്തിൽ ഡൗൺലോഡ് ചെയ്യാനും സമയബന്ധിതമായി ഉപയോഗിക്കാനും കഴിയും.
Vue.js ചട്ടക്കൂടിന് വളരെ ലളിതമായ ഒരു ഘടനയുണ്ട്, അത് മനസ്സിലാക്കാൻ വളരെ എളുപ്പമാണ്. ഈ ചട്ടക്കൂടിന്റെ ജനപ്രീതിയുടെ ഒരു കാരണം ഇതാണ്. നിങ്ങൾക്ക് HTML, JavaScript എന്നിവ പരിചിതമാണെങ്കിൽ, Vue.js-ൽ നിങ്ങൾക്ക് എളുപ്പത്തിൽ കോഡ് ചെയ്യാം. ഉപയോക്താക്കൾക്ക് അവരുടെ വെബ് പ്രോജക്റ്റിലേക്ക് Vue.js ചേർക്കാൻ അതിന്റെ ലളിതമായ ഘടനയും ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുകയും ചെയ്യാം.
Vue.js-ൽ എല്ലാത്തിനും ധാരാളം ഘടകങ്ങൾ ഉണ്ട്, നിലവിലുള്ള ആപ്ലിക്കേഷനുകളുമായി വളരെ വേഗത്തിൽ സംയോജിപ്പിക്കാനും കഴിയും. ജാവാസ്ക്രിപ്റ്റിൽ എഴുതിയ ഏത് ആപ്ലിക്കേഷനുമായും നിങ്ങൾക്ക് ഇത് സംയോജിപ്പിക്കാൻ കഴിയും.
Vue.js-ന്റെ വഴക്കമുള്ള സ്വഭാവം React.js, Angular.js എന്നിവയുടെ ഡെവലപ്പർമാർക്കും മറ്റേതെങ്കിലും പുതിയ JavaScript ചട്ടക്കൂടുകളും മനസ്സിലാക്കുന്നത് എളുപ്പമാക്കുന്നു. HTML ഫയലുകൾ, JavaScript ഫയലുകൾ, ശുദ്ധമായ JavaScript ഫയലുകൾ എന്നിവ എഴുതാൻ വെർച്വൽ നോഡുകൾ ഉപയോഗിക്കുന്നതിന് ഇത് ധാരാളം വഴക്കം നൽകുന്നു.
Vue.js ആപ്ലിക്കേഷനുകളിൽ പുനരുപയോഗിക്കാവുന്ന ഇഷ്‌ടാനുസൃത ഘടകങ്ങൾ നിങ്ങൾക്ക് സൃഷ്‌ടിക്കാനാകും.
Vue.js വളരെ ലളിതവും പൂർണ്ണവും വിശദവുമായ ഡോക്യുമെന്റേഷൻ നൽകുന്നു, അതിനാൽ HTML, JavaScript എന്നിവയെക്കുറിച്ച് കുറച്ച് അറിവുള്ള ഡെവലപ്പർമാർക്ക് ഇത് പ്രോഗ്രാമിനായി ഉപയോഗിക്കാം.
Vue.js, ReactJS, Ember മുതലായ നിലവിലുള്ള മറ്റ് ചട്ടക്കൂടുകൾക്ക് സമാനമായ വെർച്വൽ DOM ഉപയോഗിക്കുന്നു. യഥാർത്ഥ HTML DOM-ന്റെ ഭാരം കുറഞ്ഞ ഇൻ-മെമ്മറി ട്രീ പ്രാതിനിധ്യമാണ് വെർച്വൽ DOM, ഇത് പ്രാരംഭ DOM-നെ ബാധിക്കാതെ അപ്‌ഡേറ്റ് ചെയ്യുന്നു.
Vue.js അതിന്റെ മോഡൽ വ്യൂ വ്യൂ മോഡൽ (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 ഫ്രെയിംവർക്ക് ഞങ്ങളെ അനുവദിക്കുന്നു defiഡയറക്‌ടീവ്‌സ് എന്ന് വിളിക്കുന്ന nire HTML ആട്രിബ്യൂട്ടുകൾ, HTML ആപ്ലിക്കേഷനുകൾക്ക് പ്രവർത്തനക്ഷമത നൽകാൻ ഉപയോഗിക്കുന്നു.
Vue.js-ൽ രണ്ട് തരത്തിലുള്ള നിർദ്ദേശങ്ങളുണ്ട്:
Vue.js, ഡാറ്റയ്‌ക്കായി പ്ലേസ്‌ഹോൾഡറായി {{}} ഇരട്ട ബ്രേസുകൾ ഉപയോഗിക്കുന്നു, കൂടാതെ Vue.js നിർദ്ദേശങ്ങൾ ഒരു v- പ്രിഫിക്‌സ് ഉപയോഗിക്കുന്ന HTML ആട്രിബ്യൂട്ടുകളാണ്.
ഒരു Vue ആപ്പ് ഒരൊറ്റ DOM ഘടകത്തിലേക്ക് കണക്റ്റ് ചെയ്യുകയും അത് പൂർണ്ണമായി നിയന്ത്രിക്കുകയും ചെയ്യുന്നു. മുകളിലെ ഉദാഹരണത്തിൽ, ഇത് #ആപ്പ് ആണ്.
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> ഈ സാഹചര്യത്തിൽ, പുതിയ വി-ബൈൻഡ് ആട്രിബ്യൂട്ട് നിർദ്ദേശമാണ്. ഡയറക്‌ടീവുകൾ Vue നൽകുന്ന തനതായ ആട്രിബ്യൂട്ടുകളാണെന്ന് സൂചിപ്പിക്കാൻ ഒരു v- പ്രിഫിക്‌സിനൊപ്പം ഉപയോഗിക്കുന്നു, കൂടാതെ റെൻഡർ ചെയ്ത DOM-ന് പ്രത്യേക പ്രതികരണ സ്വഭാവം പ്രയോഗിക്കാനും ഉപയോഗിക്കുന്നു.
ഉദാഹരണത്തിന്റെ ഫലം ഇനിപ്പറയുന്നതാണ്
Ercole Palmeri
ആർട്ടിഫിഷ്യൽ ഇൻ്റലിജൻസ് വിപണിയിൽ ബിഗ് ടെക്കിൻ്റെ പെരുമാറ്റത്തെക്കുറിച്ച് യുകെ സിഎംഎ മുന്നറിയിപ്പ് നൽകിയിട്ടുണ്ട്. അവിടെ…
കെട്ടിടങ്ങളുടെ ഊർജ്ജ കാര്യക്ഷമത വർദ്ധിപ്പിക്കുന്നതിനായി യൂറോപ്യൻ യൂണിയൻ രൂപീകരിച്ച "ഗ്രീൻ ഹൗസ്" ഡിക്രി അതിൻ്റെ നിയമനിർമ്മാണ പ്രക്രിയ അവസാനിപ്പിച്ചു...
ഇറ്റലിയിലെ ഇ-കൊമേഴ്‌സിനെക്കുറിച്ചുള്ള കാസലെജിയോ അസോസിയറ്റിയുടെ വാർഷിക റിപ്പോർട്ട് അവതരിപ്പിച്ചു. "AI-കൊമേഴ്‌സ്: കൃത്രിമബുദ്ധിയുള്ള ഇ-കൊമേഴ്‌സിൻ്റെ അതിരുകൾ" എന്ന തലക്കെട്ടിലുള്ള റിപ്പോർട്ട്.…
നിരന്തരമായ സാങ്കേതിക നവീകരണത്തിൻ്റെയും പരിസ്ഥിതിയോടും ജനങ്ങളുടെ ക്ഷേമത്തോടുമുള്ള പ്രതിബദ്ധതയുടെയും ഫലം. ബന്ദലക്‌സ് എയർപ്യുരെ® അവതരിപ്പിക്കുന്നു, ഒരു കൂടാരം…
