Vue.js મુખ્યત્વે એપ્લિકેશનના વિઝ્યુલાઇઝેશન ભાગ પર ધ્યાન કેન્દ્રિત કરે છે, જેને ફ્રન્ટ-એન્ડ ડેવલપમેન્ટ પણ કહેવાય છે. Vue.js દિવસેને દિવસે લોકપ્રિય થઈ રહ્યું છે કારણ કે તે અન્ય પ્રોજેક્ટ્સ અને લાઈબ્રેરીઓ સાથે સંકલિત કરવું ખૂબ જ સરળ છે. તે સ્થાપિત કરવા અને વાપરવા માટે ખૂબ જ સરળ છે.
Vue.js એ પ્રગતિશીલ JavaScript ફ્રેમવર્ક છે ઓપન સોર્સ ઇન્ટરેક્ટિવ વેબ યુઝર ઇન્ટરફેસ અને સિંગલ પેજ એપ્લીકેશન (SPA) વિકસાવવા માટે વપરાય છે. Vue.js ને સામાન્ય રીતે Vue તરીકે ઓળખવામાં આવે છે અને "view.js" અથવા "view" તરીકે ઉચ્ચારવામાં આવે છે.
સિંગલ પેજ એપ્લિકેશન અથવા SPA એ વેબ એપ્લિકેશન અથવા વેબસાઇટ છે જે વપરાશકર્તાઓને ડેસ્કટોપ એપ્લિકેશન જેવો જ સરળ, પ્રતિભાવશીલ અને ઝડપી અનુભવ પ્રદાન કરે છે. સિંગલ પેજ એપ્લિકેશનમાં એક જ પૃષ્ઠ પર મેનુ, બટનો અને બ્લોક્સ શામેલ છે. જ્યારે વપરાશકર્તા તેમાંના એક પર ક્લિક કરે છે, ત્યારે તે સર્વરમાંથી સંપૂર્ણ નવા પૃષ્ઠો લોડ કરવાને બદલે ગતિશીલ રીતે વર્તમાન પૃષ્ઠને ફરીથી લખે છે. આ તેની રિસ્પોન્સિવ સ્પીડ પાછળનું કારણ છે.
Vue મૂળભૂત રીતે ફ્રન્ટએન્ડ ડેવલપમેન્ટ માટે બનાવવામાં આવ્યું છે, તેથી તેને ઘણી બધી HTML, JavaScript અને CSS ફાઇલોને હેન્ડલ કરવી પડે છે. Vue.js વપરાશકર્તાઓ માટે ડાયરેક્ટિવ નામના HTML લક્ષણો સાથે HTML ને વિસ્તારવાનું સરળ બનાવે છે. Vue.js બિલ્ટ-ઇન નિર્દેશો અને ઘણા નિર્દેશો પ્રદાન કરે છે defiHTML એપ્લિકેશન્સની કાર્યક્ષમતા સુધારવા માટે વપરાશકર્તા દ્વારા નાઈટ.
નીચે Vue.js ની સૌથી મહત્વપૂર્ણ સુવિધાઓની સૂચિ છે:
Vue.js ઘટકો આ ફ્રેમવર્કના મહત્વના લક્ષણો પૈકી એક છે. તેનો ઉપયોગ ફરીથી વાપરી શકાય તેવા કોડને સમાવિષ્ટ કરવા માટે મૂળભૂત HTML ઘટકોને વિસ્તારવા માટે થાય છે. તમે Vue.js એપ્લીકેશનમાં ફરીથી વાપરી શકાય તેવા કસ્ટમ તત્વો બનાવી શકો છો જેનો પાછળથી HTML માં ફરીથી ઉપયોગ કરી શકાય છે.
Vue.js HTML-આધારિત નમૂનાઓ પ્રદાન કરે છે જેનો ઉપયોગ Vue ઇન્સ્ટન્સ ડેટા સાથે રેન્ડર કરેલ DOM ને સાંકળવા માટે કરી શકાય છે. બધા Vue નમૂનાઓ માન્ય HTML છે જે સ્પેક-અનુસંગત બ્રાઉઝર્સ અને HTML પાર્સર્સ દ્વારા વિશ્લેષિત કરી શકાય છે. Vue.js વર્ચ્યુઅલ DOM રેન્ડરિંગ ફંક્શન્સમાં મોડલને કમ્પાઇલ કરે છે. Vue બ્રાઉઝરને રિફ્રેશ કરતા પહેલા ઘટકોને વર્ચ્યુઅલ DOM મેમરીમાં રેન્ડર કરે છે. Vue ફરીથી રેન્ડર કરવા માટે ઘટકોની ન્યૂનતમ સંખ્યાની ગણતરી પણ કરી શકે છે અને એપ્લિકેશનની સ્થિતિ બદલતી વખતે 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>Vue.js એ વેબ ડેવલપમેન્ટ અને સિંગલ પેજ એપ્લિકેશન્સ (SPA) બનાવવા માટે વ્યાપકપણે ઉપયોગમાં લેવાતી નવીનતમ સોફ્ટવેર તકનીકોમાંની એક છે. જેમ તમે નામ પરથી અનુમાન લગાવી શકો છો, તે મોટે ભાગે પ્રોજેક્ટની UI અથવા ડિસ્પ્લે બાજુ માટે વપરાય છે.
ચાલો તમારા પ્રોજેક્ટમાં Vue.js નો ઉપયોગ કરવાના ફાયદા જોઈએ:
Vue.js નો સૌથી મોટો ફાયદો એ છે કે તે કદમાં ખૂબ નાનું છે. JavaScript ફ્રેમવર્કની સફળતા તેના કદ પર ઘણો આધાર રાખે છે અને આ ઉત્તેજક JavaScript પ્લગઇન માત્ર 18-21KB છે, તેથી તમે તેને ખૂબ જ સરળતાથી ડાઉનલોડ કરી શકો છો અને તેનો ઉપયોગ કરી શકો છો.
Vue.js ફ્રેમવર્ક ખૂબ જ સરળ માળખું ધરાવે છે અને તે સમજવામાં ખૂબ જ સરળ છે. આ ફ્રેમવર્કની લોકપ્રિયતા માટે તે એક કારણ છે. જો તમે HTML અને JavaScript થી પરિચિત છો, તો તમે Vue.js માં સરળતાથી કોડ કરી શકો છો. વપરાશકર્તાઓ તેની સરળ રચનાને કારણે તેમના વેબ પ્રોજેક્ટમાં સરળતાથી Vue.js ઉમેરી શકે છે અને એપ્લિકેશનો વિકસાવી શકે છે.
Vue.js દરેક વસ્તુ માટે ઘણા ઘટકો ધરાવે છે અને હાલની એપ્લિકેશનો સાથે ખૂબ જ ઝડપથી સંકલિત કરી શકાય છે. તમે તેને JavaScript માં લખેલી કોઈપણ એપ્લિકેશન સાથે સંકલિત કરી શકો છો.
Vue.js ની લવચીક પ્રકૃતિ પણ React.js, Angular.js અને અન્ય કોઈપણ નવા JavaScript ફ્રેમવર્કના વિકાસકર્તાઓ માટે સમજવાનું સરળ બનાવે છે. તે HTML ફાઇલો, JavaScript ફાઇલો અને શુદ્ધ JavaScript ફાઇલો લખવા માટે વર્ચ્યુઅલ નોડ્સનો ઉપયોગ કરવા માટે ઘણી રાહત પૂરી પાડે છે.
તમે વૈવિધ્યપૂર્ણ ઘટકો બનાવી શકો છો જે Vue.js એપ્લિકેશનમાં ફરીથી વાપરી શકાય છે.
Vue.js ખૂબ જ સરળ, સંપૂર્ણ અને વિગતવાર દસ્તાવેજો પૂરા પાડે છે, તેથી જે વિકાસકર્તાઓને HTML અને JavaScript વિશે થોડો ખ્યાલ છે તેઓ પ્રોગ્રામ માટે તેનો ઉપયોગ કરી શકે છે.
Vue.js વર્ચ્યુઅલ DOM નો ઉપયોગ અન્ય હાલના ફ્રેમવર્ક જેવા કે ReactJS, Ember, વગેરેની જેમ કરે છે. વર્ચ્યુઅલ DOM એ મૂળ HTML DOM નું લાઇટવેઇટ ઇન-મેમરી ટ્રી પ્રતિનિધિત્વ છે અને પ્રારંભિક DOM ને અસર કર્યા વિના અપડેટ કરવામાં આવે છે.
Vue.js તેના મોડલ વ્યુ વ્યુ મોડલ (MVVM) આર્કિટેક્ચર સાથે દ્વિ-માર્ગી સંચાર પ્રદાન કરે છે જે HTML બ્લોક્સના હેન્ડલિંગને સરળ બનાવે છે.
ફ્રેમવર્ક એવી સિસ્ટમ સાથે આવે છે જે અમને સરળ અને સીધા મોડલ સિન્ટેક્સનો ઉપયોગ કરીને 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નિર HTML વિશેષતાઓ જેને ડાયરેક્ટીવ કહેવાય છે, જેનો ઉપયોગ HTML એપ્લિકેશનને કાર્યક્ષમતા પ્રદાન કરવા માટે થાય છે.
Vue.js માં બે પ્રકારના નિર્દેશો છે:
Vue.js ડેટા માટે પ્લેસહોલ્ડર્સ તરીકે ડબલ કૌંસ {{}} નો ઉપયોગ કરે છે, અને Vue.js નિર્દેશો એ HTML લક્ષણો છે જે v- ઉપસર્ગનો ઉપયોગ કરે છે.
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 વિશેષતા એ નિર્દેશક છે. નિર્દેશોનો ઉપયોગ v- ઉપસર્ગ સાથે કરવામાં આવે છે તે દર્શાવવા માટે કે તે Vue દ્વારા પ્રદાન કરવામાં આવેલ અનન્ય વિશેષતાઓ છે, અને તેનો ઉપયોગ રેન્ડર કરેલ DOM પર વિશેષ પ્રતિભાવશીલ વર્તન લાગુ કરવા માટે થાય છે.
ઉદાહરણનું પરિણામ નીચે મુજબ છે
Ercole Palmeri
રંગ દ્વારા સુંદર મોટર કૌશલ્ય વિકસાવવાથી બાળકોને લેખન જેવી વધુ જટિલ કુશળતા માટે તૈયાર કરવામાં આવે છે. રંગ કરવા માટે…
નૌકાદળ ક્ષેત્ર એ સાચી વૈશ્વિક આર્થિક શક્તિ છે, જેણે 150 અબજના બજાર તરફ નેવિગેટ કર્યું છે...
ગયા સોમવારે, ફાઇનાન્શિયલ ટાઇમ્સે OpenAI સાથેના સોદાની જાહેરાત કરી હતી. FT તેના વિશ્વ કક્ષાના પત્રકારત્વને લાઇસન્સ આપે છે...
લાખો લોકો સ્ટ્રીમિંગ સેવાઓ માટે ચૂકવણી કરે છે, માસિક સબ્સ્ક્રિપ્શન ફી ચૂકવે છે. સામાન્ય અભિપ્રાય છે કે તમે…
