Vue.js वेब विकास के लिए सर्वोत्तम अभ्यास

मैं Syncrasy टेक (आईटी समाधान कंपनी) में एक पूर्ण-स्टैक डेवलपर हूं । मुझे रिएक्ट कोड लिखना बहुत पसंद है। लेकिन मैं आपको यह क्यों बता रहा हूं क्योंकि हम यहां वेब विकास के लिए सर्वोत्तम प्रथाओं के बारे में चर्चा कर रहे हैं। मैं आपको यह बता रहा हूं ताकि आप मेरी पृष्ठभूमि को समझ सकें और मैं यहां Vue.js. की चर्चा क्यों कर रहा हूं

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

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

कुछ दिनों बाद, मैंने आखिरकार अपना कोड उसमें लाने का फैसला किया। यहां मैं जो साझा कर रहा हूं वह कई सर्वोत्तम अभ्यास हैं जो मैंने अपने अनुभव के साथ Vue के साथ सीखे हैं। मैं वह साझा करने के लिए तैयार हूं जो मुझे मिलेगा।

चलिए शुरू करते हैं

Vue पर एक बार में सब कुछ सीखने की कोशिश करना भारी पड़ सकता है। चलो नंबरों से शुरू करते हैं। आज Vue में 147K Github के सितारे हैं, जो Angular (50.6k stars) और React (135k stars) जैसे JS दिग्गजों को पीछे छोड़ रहे हैं।

मैंने Vue की सर्वोत्तम प्रथाओं को चार श्रेणियों में विभाजित किया है:

Vue कार्यात्मकता

Vue के फंक्शंस में हूड के तहत स्वचालित रूप से चर्चा करने के लिए बहुत सारे सामान हैं। Vue.js एक सरल दृश्य-उन्मुख मंच है जो इसका पहला मुख्य लाभ है। कोडिंग में सभी जानकारी केवल तभी मान्य है जब यह नामांकित और नेस्टेड नाम वाले विचारों के साथ सही ढंग से बातचीत करता है।

Vue में एक एकल दृश्य बनाना बहुत सरल है, आपको केवल इंटरफ़ेस लोड करना होगा और अपने वेब ऐप के विकास को शुरू करने के लिए जावास्क्रिप्ट जोड़ना होगा।

let vm = new Vue({ el: "#my-webapp", data: { firstName: "MyFamous", lastName: "Magazine", } }) 

फिर, अंतिम दृश्य प्राप्त करने के लिए मार्कअप का एक सा:

 <div id="my-webapp"> <h1>Hello, {{firstName}} {{lastName}}!</h1> </div> 

उपरोक्त कोड क्या प्रकट करता है?

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

वीयू सिस्टम जैसे कि JQuery डोम में जानकारी रखता है और सभी अतिरिक्त परिवर्तनों के लिए डेवलपर्स को संबंधित भागों के प्रतिपादन और संशोधन करने की आवश्यकता होती है। चलो Vue कार्यक्षमताओं के अन्य भागों पर चलते हैं।

अवयव

वेब ऐप्स के लिए, Vue.com Vom.compoment का उपयोग करके Vue Developers अन्य पुस्तकालयों की तरह ही घटकों का उपयोग कर सकते हैं। एक घटक में एक नाम, कॉन्फ़िगरेशन या पहचानकर्ता शामिल हो सकता है।

 Vue.component('component-name', { /* options */ }) 

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

 <template> <p>{{ hi }}</p> </template> <script> export default { data() { return { hi: 'Hi Folks!' } } } </script> <style scoped> p { color: yellow; } </style> 

Vue एकल फ़ाइल घटक आपके वेब ऐप में आधुनिक वेब सुविधाओं का उपयोग करने और उन्हें लागू करने की क्षमता प्रदान करने के लिए WebPack का उपयोग करते हैं। कोडर पूर्वप्रक्रमकों का उपयोग करके पग का उपयोग करके निर्मित टेम्पलेट निर्दिष्ट कर सकते हैं:

टाइपप्रति
एससीएसएस
सास
कम
PostCSS
बंदर

Vue v-bind फ़ंक्शन घटक को मूल घटक (Props) से डेटा स्वीकार करने की अनुमति देता है जिसे स्ट्रिंग्स के सरणी में देखा जा सकता है:

 props:{ title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor } 

यह न केवल आपके घटकों का दस्तावेजीकरण करेगा, बल्कि जब आप ब्राउज़र के जावास्क्रिप्ट कंसोल में एक गलत कोड टाइप पास करेंगे, तो यह आपको चेतावनी भी देगा।

संक्षेप में, Vue वेब ऐप डेवलपर्स को बहुत लचीलापन प्रदान करता है जो विभिन्न विकास रणनीतियों के अनुरूप है और विभिन्न Vue पुस्तकालयों के साथ बातचीत की सुविधा भी देता है।

ईवेंट्स एंड हैंडलर टू हैंडल एरर्स इन वीयू
Vue JS एक प्रगतिशील JS चौखट है जो दृश्य परत और सहायक पुस्तकालयों की प्रणाली पर केंद्रित है। वेब एप्लिकेशन डेवलपमेंट के सभी चरणों के लिए, जो Vue का उपयोग करते हैं, ईवेंट्स को निर्देश v-on और कॉलनों v-on बनाया जाता है, जिनका उपयोग इवेंट प्रकार जैसे v-on क्लिक को पहचानने के लिए किया जाता है।

वी-ऑन का एक सरल उदाहरण यह हो सकता है:

 <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> 

Vue में HTML DOM इवेंट्स के कुछ उदाहरण:
बदलाव पर
क्लिक पर
होवर पर
लोड पर
माउस-आउट पर
माउस पर
लोड पर

Vue JS में इवेंट हैंडलर

घटनाक्रम में होने वाली त्रुटियों से निपटने के लिए हैंडलर को सौंपा गया है। यह एक डेवलपर को एक निर्दिष्ट घटना शुरू होने पर कोड लिखने की अनुमति देता है।

सशर्त प्रतिपादन और स्वर में लूप

Vue में सशर्त प्रतिपादन का अर्थ है कि DOM से कुछ तत्वों को निकालना या जोड़ना यदि कोई निर्दिष्ट मान सत्य है। सशर्त डेटा बाइंडिंग के लिए यह सबसे अच्छा तरीका है जो डेवलपर्स को किसी विशेष स्थिति के सत्य होने पर जानकारी को जोड़ने की अनुमति देता है। आप सशर्त प्रतिपादन के लिए v-if निर्देश का उपयोग कर सकते हैं।

एक उदाहरण देखें:

 <template> <div> <!-- v-if="javascript expression" --> <h1 v-if="isActive">Hello Vuejs</h1> <button @click="isActive= !isActive">Click</button> </div> </template> <script> export default{ data:function(){ return{ isActive:false } } } </script> 

V-if निर्देश का विस्तार करने के लिए आप v- और का उपयोग कर सकते हैं:

 <h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else>Hey Vuejs</h1> 

आप इसे वी-और-अगर ब्लॉक का उपयोग करके आगे बढ़ा सकते हैं:

 <h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else-if="isActive && a.length===0">You're vuejs</h1> <h1 v-else>Hey Vuejs</h1> 

यदि कोई प्रोग्रामर मूल्यांकन करना चाहता है वह मान सत्य है, तो v-if टेम्पलेट चलाएँ। आगे के एक्सटेंशन के लिए, v-else या v-if-else if- v-if-else निर्देश ट्रिगर किया गया है।

Vue JS में एक साधारण API प्रोटोकॉल होता है जो V- के निर्देश के लिए जगह बनाने की अनुमति देता है जो DOM में आइटम्स की सूची प्रस्तुत करता है।

उदाहरण:

 <template> <ul> <!-- list rendering starts --> <li v-for="user in users">{{user.name}}</li> </ul> </template> <script> export default{ data:function(){ return{ users:[ {id:1,name:"samuel"}, {id:2,name:"queen"}, {id:3,name:"rinha"}, ] } } } </script> 

उपरोक्त कोडिंग में, एक लूप कोड के माध्यम से v-for directive का उपयोग करके सरणी के रूप में चलता है। सरणी उन ऑब्जेक्ट्स को संदर्भित करती है जो उपयोगकर्ताओं को सरणी के अंदर मौजूद गुणों को देखने की अनुमति देती है।

आउटपुट:

 samuel queen rinha 

विकास प्रक्रिया को गति देने के लिए दो-तरफ़ा डेटा बाइंडिंग

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

यह कैसे काम करता है?

 <template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script> <template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script> 

v-model निर्देश .lazy संशोधक के विकल्प के साथ आता है जो परिवर्तन की घटना के बाद डेटा संपत्ति को अद्यतन करता है।

आप अपने कोड से सफेद स्थान को हटाने के लिए .trim फ़ंक्शन का भी उपयोग कर सकते हैं।

यदि आप इनपुट क्षेत्र में संख्याओं को स्वीकार करना चाहते हैं तो .number संशोधक का विकल्प वहां मौजूद है।

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