JQuery से Vue.js की ओर पलायन

लेख के लेखक, जिसका अनुवाद हम आज प्रकाशित करते हैं, का मानना ​​है कि दुनिया में कई और प्रोग्रामर हैं, जिन्हें जब एक साधारण वेब एप्लिकेशन विकसित करने की आवश्यकता होती है, तो jQuery की ओर रुख करते हैं। आमतौर पर ऐसा तब होता है जब एक निश्चित पृष्ठ को सरल इंटरैक्टिव विशेषताओं से लैस करने की आवश्यकता होती है, लेकिन इसके लिए किसी प्रकार के जावास्क्रिप्ट ढांचे का उपयोग करना ओवरकिल जैसा लगता है। आखिरकार, ये अनावश्यक कोड, टेम्प्लेट, निर्माण परियोजनाओं के लिए उपकरण, पैकिंग मॉड्यूल के लिए उपकरण हैं ... उसी समय, सीडीएन संसाधन का उपयोग करके एक jQuery पृष्ठ से कनेक्ट करना नाशपाती के गोले जितना आसान है।



यह आलेख चर्चा करेगा कि jQuery का उपयोग करके बनाई गई परियोजना का अनुवाद Vue.js. कैसे करें यह परियोजना jQuery पर बनाई जाएगी, और फिर Vue का उपयोग करके पुन: डिज़ाइन किया जाएगा। सामग्री का लेखक सभी को प्रदर्शित करना चाहता है कि अपेक्षाकृत छोटी परियोजनाओं में भी, Vue का उपयोग, जरूरी नहीं कि ऐसी परियोजनाओं के कोड आकार में अत्यधिक वृद्धि और प्रोग्रामर पर एक बड़ा अतिरिक्त बोझ हो। यह, इसके विपरीत, jQuery का उपयोग करते समय सहायक कोड के लगभग समान आकार के साथ, आपको उत्पादकता बढ़ाने और अनुप्रयोगों की गुणवत्ता में सुधार करने की अनुमति देता है।

परियोजना का अवलोकन

हम स्पार्कसुइट से इस ओपन सोर्स टेम्पलेट के आधार पर एक साधारण इलेक्ट्रॉनिक खाता विकसित करने जा रहे हैं।

अक्सर, ऐसे मामले अध्ययन सभी प्रकार की टू-डू सूचियों का उपयोग करते हैं। मुझे उम्मीद है कि इस परंपरा से एक प्रस्थान कहानी को ताजा और अधिक रोचक बना देगा, और, एक ही समय में, हमारा कार्य काफी मुश्किल होगा ताकि छोटी परियोजनाओं को विकसित करने के लिए वीयू जैसी किसी चीज का उपयोग करने के लाभों का प्रदर्शन किया जा सके। मैनुअल को इसलिए बनाया गया है ताकि विशेष कठिनाइयों के बिना हर कोई इसे पुन: पेश कर सके और प्रस्तावित कार्य विधियों में महारत हासिल कर सके।

यहां वह खाता टेम्प्लेट है जिसके साथ हम काम करना चाहते हैं।


इलेक्ट्रॉनिक चालान

हम इसमें इंटरेक्टिव फीचर जोड़ने जा रहे हैं, जिससे इसे बनाया जा सकेगा ताकि किसी उत्पाद, उसकी मात्रा और यूनिट की कीमत का चयन करना संभव हो सके। मूल्यों को बदलते समय, माल की कुल लागत और दस्तावेज़ की कुल राशि पुनर्गणना होगी। इसके अलावा, हम यहां एक बटन जोड़ेंगे जो आपको खाते में नई खाली लाइनें डालने की अनुमति देगा।

मैंने खाली स्ट्रिंग के HTML कोड को निम्न रूप में परिवर्तित करके टेम्पलेट को संशोधित किया है:

<tr class="item">  <td><input value="" /></td>  <td>$<input type="number" value="0" /></td>  <td><input type="number" value="1" /></td>  <td>$0.00</td> </tr> 

JQuery परियोजना विकास

सबसे पहले, आइए देखें कि jQuery का उपयोग करके हमारी समस्या को कैसे हल किया जाए।

 $('table').on('mouseup keyup', 'input[type=number]', calculateTotals); 

हम ईवेंट श्रोता को तालिका से जोड़ते हैं। जब उत्पाद की इकाई लागत या उसके मात्रा परिवर्तन के अनुरूप मान हो, तो यह श्रोता calculateTotals फ़ंक्शन को कॉल करेगा:

 function calculateTotals()  { const subtotals = $('.item').map((idx, val)  => calculateSubtotal(val)).get(); const total = subtotals.reduce((a, v)  => a + Number(v), 0); $('.total td:eq(1)').text(formatAsCurrency(total)); } 

फ़ंक्शन तालिका की पंक्तियों को लेता है और उनके माध्यम से चलता है, प्रत्येक पंक्तियों की calculateSubtotal कर रहा है और गणनासुबोटल फ़ंक्शन के लिए परिणाम प्रस्तुत करता है। गणना का परिणाम निरंतर स्थिर में आता है। परिणामस्वरूप, दस्तावेज़ की कुल राशि को खाते के संबंधित क्षेत्र में प्रतिस्थापित किया जाता है।

 function calculateSubtotal(row) { const $row = $(row); const inputs = $row.find('input'); const subtotal = inputs[1].value * inputs[2].value; $row.find('td:last').text(formatAsCurrency(subtotal)); return subtotal; } 

इस कोड में, हम पंक्ति में मौजूद सभी <input> फ़ील्ड्स का संदर्भ लेते हैं, फिर हम दूसरे और तीसरे फ़ील्ड में संग्रहीत मानों को subtotal मान प्राप्त करने के लिए गुणा करते हैं। फिर यह मान पंक्ति के अंतिम सेल में डाला जाता है। हम इस मान को formatAsCurrency फ़ंक्शन का उपयोग करके formatAsCurrency करते हैं। यहाँ उसका कोड है:

 function formatAsCurrency(amount) { return `$${Number(amount).toFixed(2)}`; } 

इसके अलावा, हमारे पास एक छोटा सहायक कार्य है जिसका उपयोग हम सामान के लिए राशियों के साथ और दस्तावेज़ के लिए फ़ील्ड के समान स्वरूप को सुनिश्चित करने के लिए करते हैं। अर्थात्, हमें इन क्षेत्रों में संख्याओं के सामने $ चिन्ह होना चाहिए, और वे दो दशमलव स्थानों के साथ दशमलव संख्याएँ होनी चाहिए।

 $('.btn-add-row').on('click', () => { const $lastRow = $('.item:last'); const $newRow = $lastRow.clone(); $newRow.find('input').val(''); $newRow.find('td:last').text('$0.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); }); 

और अंत में, हमारे पास Add row बटन पर क्लिक करने के लिए एक इवेंट हैंडलर है, जो दस्तावेज़ में एक नई लाइन जोड़ने का कार्य करता है। यहां हम उत्पाद डेटा वाले तालिका में अंतिम पंक्ति लेते हैं, और इसकी एक प्रति बनाते हैं। उसी समय, हम इस नई पंक्ति के क्षेत्रों में मानक डेटा सम्मिलित करते हैं। इसके अलावा, हम उपयोगकर्ता की सुविधा का ध्यान रख सकते हैं और एक नई लाइन के पहले क्षेत्र पर ध्यान केंद्रित कर सकते हैं, जो उपयोगकर्ता को नई लाइन जोड़ने के तुरंत बाद, अपने पहले क्षेत्र में डेटा दर्ज करना शुरू करने की अनुमति देगा।

यहां एक ऐसे खाते का एक कार्यशील उदाहरण दिया गया है, जिसकी सहभागी विशेषताएं jQuery के उपकरणों का उपयोग करके कार्यान्वित की जाती हैं।

JQuery आधारित समाधान के नुकसान

आइए हम अपने आप से पूछें कि उपरोक्त दृष्टिकोण के नुकसान क्या हैं, या बल्कि, हमारी परियोजना को कैसे सुधारें।

आपने नए पुस्तकालयों के बारे में सुना होगा, जैसे कि Vue और React, जिनके बारे में कहा जाता है कि वे अपरिपक्व शैली के बजाय एक घोषणापत्र में काम करने की अनुमति देते हैं। यदि आप ऊपर दिए गए jQuery कोड को देखते हैं, तो यह स्पष्ट है कि यह मुख्य रूप से DOM को हेरफेर करने वाले निर्देशों का एक सेट के रूप में पढ़ा जाता है। इस कोड के प्रत्येक खंड का उद्देश्य, अर्थात्, यह क्या करता है के सवाल का जवाब, अक्सर यह पता लगाना काफी मुश्किल होता है कि यह कैसे करता है। बेशक, आप कोड के टुकड़ों के इरादों को स्पष्ट रूप से चुने गए नामों के साथ फ़ंक्शन में तोड़कर स्पष्ट कर सकते हैं। हालाँकि, यदि आप इस कोड को कुछ समय के लिए छोड़ देते हैं, और फिर वापस उसी पर लौटते हैं, तो यह पता चलता है कि इसे समझने के लिए, आपको अभी भी कुछ प्रयास करने होंगे।

इस कोड के साथ एक और समस्या यह है कि एप्लिकेशन की स्थिति DOM में संग्रहीत है। उपयोगकर्ता द्वारा ऑर्डर किए जाने वाले उत्पादों के बारे में जानकारी उपयोगकर्ता इंटरफ़ेस में HTML मार्कअप के हिस्से के रूप में मौजूद है। यदि हम सभी को एक ही स्थान पर डेटा का उत्पादन करने की आवश्यकता है, तो यह समस्या इतनी गंभीर नहीं लगती है। हालाँकि, जैसे ही एप्लिकेशन के कई स्थानों पर इस डेटा को प्रदर्शित करना आवश्यक हो जाता है, हमें डेटा को सिंक्रनाइज़ करने के कार्य के साथ सामना करना पड़ता है। बिना, जैसा कि हमारे मामले में, विश्वसनीय डेटा का एक स्रोत है, उन्हें पूरे एप्लिकेशन में अद्यतित रखना बहुत मुश्किल है।

JQuery का उपयोग करते समय, कुछ भी हमें DOM के बाहर एप्लिकेशन की स्थिति को संग्रहीत करने से नहीं रोकता है और ऊपर वर्णित समस्या से बचने के लिए, Vue जैसी लाइब्रेरी एक ऐसी सुविधा प्रदान करती है जो एक अच्छे आर्किटेक्चर के साथ एप्लिकेशन बनाने में मदद करती है। ये लाइब्रेरी प्रोग्रामर को क्लीनर, अधिक संरचित कोड लिखने में मदद करती हैं।

Vue पर प्रोजेक्ट ट्रांसलेशन

अब बात करते हैं कि Vue पर समान कार्यक्षमता को फिर से कैसे बनाया जाए। Vue की क्षमताओं का लाभ उठाने के लिए, इस लाइब्रेरी को एक नियमित वेब पेज से कनेक्ट करें, जैसा कि आप jQuery के साथ करते हैं। यही है, पैकिंग मॉड्यूल या ट्रांसपिलर के लिए सिस्टम का उपयोग करने की कोई आवश्यकता नहीं है; आपको एप्लिकेशन को घटकों में तोड़ने और उनके कोड को .vue फ़ाइलों में विघटित करने की आवश्यकता नहीं है।

हम <script> की सामग्री को प्रतिस्थापित करके प्रोजेक्ट को Vue में बदलना शुरू करते हैं:

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 

अगला चरण Vue का नया उदाहरण बनाना है:

 const app = new Vue({ el: 'table' }); 

नए Vue उदाहरण के निर्माता के पास जाने के लिए एकमात्र पैरामीटर el । यह एक चयनकर्ता है (जो jQuery में उपयोग किया जाता है) जो दस्तावेज़ के उस भाग की पहचान करता है जिसे हम Vue के साथ नियंत्रित करना चाहते हैं।

Vue को विभिन्न आकारों के कार्य सौंपे जा सकते हैं - एक पूरे पृष्ठ को प्रबंधित करने से (उदाहरण के लिए, एक एकल-पृष्ठ अनुप्रयोग), एक <div> में संलग्न छोटे टुकड़े के <div> । हमारे उदाहरण में, Vue HTML तालिका के साथ काम करने के लिए जिम्मेदार होगा।

डेटा

दस्तावेज़ की तीन पंक्तियों के लिए Vue उदाहरण में सशर्त डेटा जोड़ें:

 const app = new Vue({ el: 'table', data: {   items: [     { description: 'Website design', quantity: 1, price: 300 },     { description: 'Hosting (3 months)', quantity: 1, price: 75 },     { description: 'Domain name (1 year)', quantity: 1, price: 10 },   ] } }); 

data प्रॉपर्टी वह जगह है जहां हम एप्लिकेशन की स्थिति को स्टोर करते हैं। राज्य में न केवल वह डेटा शामिल है जिसके साथ हमारे एप्लिकेशन को काम करना चाहिए, बल्कि उपयोगकर्ता इंटरफ़ेस की स्थिति के बारे में भी जानकारी है (उदाहरण के लिए, एप्लिकेशन का कौन सा अनुभाग, जिसमें कई टैब शामिल हैं, वर्तमान में सक्रिय है, या क्या एक निश्चित विजेट को छोटा किया गया है, एक "समझौते", या विस्तारित की तरह)।

Vue आवेदन की स्थिति को अपनी प्रस्तुति (जो कि DOM से है) से अलग रखने में मदद करता है, और राज्य को एक ही स्थान पर संग्रहीत करने में मदद करता है, जो विश्वसनीय डेटा का एकल स्रोत है।

टेम्पलेट संशोधन

अब टेम्पलेट को कॉन्फ़िगर करें ताकि यह data ऑब्जेक्ट में संग्रहीत डेटा को प्रदर्शित करे। चूँकि हमने रूपरेखा बताई थी कि हम एक Vue उदाहरण का उपयोग करके एक तालिका के साथ काम करना चाहते थे, हम HTML कोड में Vue टेम्पलेट सिंटैक्स का उपयोग कर सकते हैं जो इस तालिका का वर्णन करता है ताकि Vue को बताएं कि तालिका कैसे प्रस्तुत की जाए और इसका उपयोग कैसे किया जाए। काम करना।

v-for विशेषता का उपयोग करते हुए, हम items ऐरे से प्रत्येक तत्व के लिए HTML कोड का एक ब्लॉक खोज सकते हैं:

 <tr class="item" v-for="item in items"> </tr> 

Vue के लिए पास किए गए सरणी (या ऑब्जेक्ट) के प्रत्येक तत्व के लिए Vue यह मार्कअप दोहराएगा। यह हमें प्रत्येक तत्व को लूप में संदर्भित करने की अनुमति देता है। इस मामले में, यह तत्व item चर द्वारा दर्शाया गया है। चूंकि Vue data ऑब्जेक्ट के गुणों की देखरेख करता है, इसलिए items सरणी की सामग्री में परिवर्तन होने पर रूपरेखा गतिशील रूप से मार्कअप को अपडेट करेगी। हम सभी को तत्वों को जोड़कर या हटाकर राज्य को संशोधित करने की आवश्यकता है, और Vue स्वचालित रूप से उपयोगकर्ता इंटरफ़ेस को अपडेट करेगा।

इसके अलावा, हमें उन इनपुट फ़ील्ड्स को जोड़ने की आवश्यकता है जो उपयोगकर्ता उत्पाद, इकाई मूल्य, मात्रा का विवरण दर्ज करके भर सकता है:

 <td><input v-model="item.description" /></td> <td>$<input type="number" v-model="item.price" /></td> <td><input type="number" v-model="item.quantity" /></td> <td>${{ item.price * item.quantity }}</td> 

यहां हम डेटा मॉडल में इनपुट फ़ील्ड और गुणों के बीच दो-तरफ़ा डेटा बाइंडिंग को कॉन्फ़िगर करने के लिए v-model विशेषता का उपयोग करते हैं। इसका मतलब है कि इनपुट फ़ील्ड में डेटा बदलने से मॉडल में उनका परिवर्तन होगा, और इसके विपरीत।

अंतिम सेल में, हम घुंघराले ब्रेसिज़ {{}} का उपयोग करते हैं, हम उनका उपयोग टेक्स्ट प्रदर्शित करने के लिए करते हैं। आप कोष्ठकों में किसी भी कामकाजी जावास्क्रिप्ट अभिव्यक्ति का उपयोग कर सकते हैं। इस मामले में, हम तत्व और आउटपुट के दो गुणों को गुणा करते हैं जो हुआ। फिर से, Vue डेटा मॉडल की देखरेख करता है, किसी भी संपत्ति को बदलने से स्वचालित रूप से अभिव्यक्ति की पुनरावृत्ति होगी।

घटनाएँ और तरीके

अब हमारे पास items संग्रह प्रदर्शित करने के लिए एक खाका तैयार है और हमें इस सवाल का सामना करना पड़ रहा है कि तालिका में नई पंक्तियों को कैसे जोड़ा जाए। चूंकि Vue पृष्ठ पर एक खाली स्ट्रिंग प्रदर्शित करने के लिए, पृष्ठ में items सरणी में मौजूद सभी चीज़ों को आउटपुट करेगा, यह किसी भी मान के साथ Vue ऑब्जेक्ट को पास करने के लिए पर्याप्त है जो items सरणी में मौजूद होना चाहिए।

एक फ़ंक्शन बनाने के लिए जिसे टेम्पलेट से एक्सेस किया जा सकता है, आपको इस फ़ंक्शन को methods गुण के रूप में Vue उदाहरण में पास करने की आवश्यकता है:

 const app = new Vue({ // ... methods: {   myMethod() {} }, // ... }) 

addRow विधि की addRow , जिसे items सरणी में एक नया आइटम जोड़ने के लिए कहा जा सकता है:

 methods: { addRow() {   this.items.push({ description: '', quantity: 1, price: 0 }); }, }, 

कृपया ध्यान दें कि हमारे द्वारा बनाई गई कोई भी विधि स्वतः ही Vue उदाहरण के लिए बाध्य हो जाएगी, जो हमें data ऑब्जेक्ट के गुणों और अन्य विधियों को इन विधियों से इसके गुणों के रूप में एक्सेस करने में सक्षम करेगी।

तो अब हमारे पास एक तरीका है। Add row बटन पर क्लिक करके इसे कैसे कॉल करें? टेम्पलेट में नियंत्रण के लिए ईवेंट श्रोताओं को जोड़ने के लिए, Vue v-on:event-name सिंटैक्स का उपयोग करता है।

 <button class="btn-add-row" @click="addRow">Add row</button> 

Vue v-on कंस्ट्रक्शन के लिए एक शॉर्टकट भी प्रदान करता है, जो @ जैसा दिखता है। इसका उपयोग ऊपर दिए गए स्निपेट में किया जाता है। आप इवेंट हैंडलर के रूप में Vue उदाहरण से किसी भी विधि का उपयोग कर सकते हैं।

संगणित गुण

अब हमें चालान के तल पर दस्तावेज़ के लिए कुल राशि वापस लेनी होगी। यह टेम्पलेट में ही किया जा सकता है। जैसा कि पहले ही उल्लेख किया गया है, Vue आपको घुंघराले कोष्ठक से निर्माण में किसी भी काम करने वाले JS-अभिव्यक्तियों को रखने की अनुमति देता है। हालांकि, एक दृष्टिकोण का पालन करना बहुत बेहतर है जिसमें केवल बहुत ही सरल तर्क है और अधिक कुछ भी टेम्पलेट में संग्रहीत नहीं है। यदि तर्क को टेम्पलेट से अलग किया जाता है, तो कोड क्लीनर होगा, परीक्षण करना आसान होगा।

इस उद्देश्य के लिए, हम सामान्य विधि का उपयोग कर सकते हैं, लेकिन मेरा मानना ​​है कि इस मामले में, तथाकथित गणना की गई संपत्ति हमारे लिए सबसे अच्छी है। इस तरह के गुणों के साथ काम करना तरीकों के साथ उपरोक्त कार्य जैसा दिखता है। अर्थात्, ऐसे गुण बनाने के लिए, एक computed वस्तु को Vue computed , जिसमें ऐसे कार्य होते हैं जिनके निष्पादन के परिणाम हम टेम्पलेट में उपयोग करना चाहते हैं:

 const app = new Vue({ // ... computed: {   total() {     return this.items.reduce((acc, item) => acc + (item.price * item.quantity), 0);   } } }); 

अब गणना की गई संपत्ति को टेम्पलेट से संदर्भित किया जा सकता है:

 <tr class="total"> <td colspan="3"></td> <td>Total: ${{ total }}</td> 

जैसा कि आपने देखा होगा, टेम्प्लेट में परिकलित गुण काम करते हैं जैसे कि वे डेटा थे। इस मामले में, आपको टेम्पलेट में कुछ भी "कॉल" करने की आवश्यकता नहीं है। कम्प्यूटेड गुणों का उपयोग करने का एक और फायदा है। Vue एक काफी बुद्धिमान प्रणाली है, यह लौटाए गए मूल्यों को कैश करता है और उन्हें केवल तभी पुन: गिनता है, जिस पर परिकलित गुणों के मान को परिवर्तित किया जाता है।

यदि हमने दस्तावेज़ के लिए कुल राशि की गणना करने के लिए विधि का उपयोग किया है, तो प्रत्येक बार टेम्पलेट आउटपुट होने पर गणना की जाएगी। लेकिन, चूंकि हम गणना की गई संपत्ति का उपयोग करते हैं, कुल राशि केवल तालिका के पंक्तियों में quantity या price मूल्यों को बदलते समय पुनर्गणना होती है।

फिल्टर

आपने देखा होगा कि Vue का उपयोग करके बनाई गई हमारी परियोजना के कार्यान्वयन में एक छोटी सी त्रुटि है। यह इस तथ्य में शामिल है कि जब व्यक्तिगत वस्तुओं की कीमतों को पूरे संख्याओं में व्यक्त किया जाता है, पंक्तियों में कुल मात्राओं की गणना की जाती है और दस्तावेज़ में कुल राशि सेंट के बिना पूरे डॉलर मूल्यों के रूप में प्रदर्शित की जाती है। हम चाहते हैं, जैसे कि jQuery के उदाहरण में, इन नंबरों में हमेशा दो दशमलव स्थान होते हैं।

लाइन के कुल मूल्य की गणना के लिए जिम्मेदार कोड को संशोधित करने के बजाय, और कोड जो दस्तावेज़ के लिए कुल राशि की गणना करता है, हम Vue की सुविधाजनक डेटा स्वरूपण क्षमताओं का लाभ उठा सकते हैं। यह फिल्टर के बारे में है।

जैसा कि आप शायद पहले ही समझ चुके हैं, फ़िल्टर बनाने के लिए, Vue उदाहरण के लिए संबंधित कुंजी के साथ एक ऑब्जेक्ट (इस मामले में filters ) को पारित करने के लिए पर्याप्त है:

 const app = new Vue({ // ... filters: {   currency(value) {     return value.toFixed(2);   } } }); 

यहाँ हमने एक बहुत ही सरल फ़िल्टर बनाया है जिसे currency कहा जाता है। यह इसके पास toFixed(2) गए संख्यात्मक मान के लिए toFixed(2) फ़ंक्शन को कॉल करता है और परिणाम देता है। आप इस फिल्टर को टेम्पलेट में निम्नानुसार उपयोग कर सकते हैं:

 <td>Total: ${{ total | currency }}</td> 

यहाँ Vue पर हमारी परियोजना का तैयार कार्यान्वयन है।

परिणाम

यदि आप परियोजना के दो संस्करणों की तुलना करते हैं, एक jQuery का उपयोग करके बनाया गया है, और दूसरा Vue में लिखा गया है, तो आप Vue- आधारित एप्लिकेशन की निम्नलिखित खूबियों को देखेंगे।

• उपयोगकर्ता इंटरफ़ेस, तर्क और डेटा को नियंत्रित करने वाले इंटरफ़ेस के बीच एक स्पष्ट अलगाव। कोड अधिक स्पष्ट है, परीक्षण करना आसान होगा।
• इंटरफ़ेस का एक घोषणात्मक विवरण। प्रोग्रामर को केवल इस बात का ध्यान रखना है कि स्क्रीन पर वह क्या देखना चाहता है, उसका वर्णन कैसे करना है, न कि आवेदन पृष्ठ को वांछित रूप देने के लिए DOM तक कैसे पहुँचें।

Vue और jQuery लाइब्रेरी लगभग एक ही आकार (किलोबाइट में) हैं। बेशक, हमारी खुद की लाइब्रेरी असेंबली का उपयोग करके jQuery के आकार को कम किया जा सकता है, लेकिन यहां तक ​​कि अपेक्षाकृत सरल परियोजनाओं में, जैसे कि एक इलेक्ट्रॉनिक खाते का हमारा उदाहरण, मेरा मानना ​​है कि कोड के विकास और पठनीयता में आसानी एप्लिकेशन के आकार में मामूली वृद्धि को सही ठहराती है।

इसके अलावा, Vue की क्षमताएं उन लोगों की तुलना में बहुत व्यापक हैं, जिन्हें हमने यहां वर्णित किया है। इस ढांचे की ताकत इस तथ्य में निहित है कि यह आपको मॉड्यूलर, पुन: प्रयोज्य उपयोगकर्ता इंटरफ़ेस घटक बनाने की अनुमति देता है जिससे आप जटिल ग्राहक एप्लिकेशन बना सकते हैं।

यदि आप Vue पर वेब एप्लिकेशन विकसित करने के विषय में रुचि रखते हैं, तो इस सामग्री पर एक नज़र डालें। इसके अलावा, यदि आप शुद्ध जेएस से Vue तक की परियोजनाओं पर विचार कर रहे हैं, तो इस विषय पर हमारा हालिया प्रकाशन है ।

प्रिय पाठकों! क्या आप jQuery का उपयोग करते हैं? और, यदि आप इसका उपयोग करते हैं, तो क्या आप इस लाइब्रेरी को किसी और चीज़ में बदलने की योजना बना रहे हैं, उदाहरण के लिए - Vue के लिए?