Vue.js में बिल्डिंग वेबएप का परिचय

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

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

Vue.js क्या है?

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

क्या सीखना मुश्किल है?

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

Vue के साथ सीखने की अवस्था प्रतिक्रिया की तुलना में थोड़ी कम है, और यह Angular की तुलना में बहुत कम खड़ी है। तो क्या सही रूप में कहा जा सकता है कि अन्य लोकप्रिय विकास रूपरेखाओं की तुलना में Vue सीखना आसान है।

वाउ उद्देश्यों को प्राप्त करने में कैसे मदद करता है?

यह वास्तव में आपके उद्देश्य के आधार पर थोड़ा भिन्न होता है, लेकिन सामान्य तौर पर, आप HTML ब्लॉक में कोड ब्लॉक को बांधते हैं। यह पद्धति नियमित HTML, सीएसएस और जावास्क्रिप्ट की तुलना में अन्तरक्रियाशीलता और गतिशील सामग्री को पेश करना आसान बनाती है।

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

Vue का एक और फायदा यह है कि यह प्रतिरूपकता प्रदान करता है, जिसका अर्थ है कि आप कई परियोजनाओं में आपके द्वारा विकसित घटकों का पुन: उपयोग कर सकते हैं।

क्या Vue की आस्तीन में कोई ठंडी चाल है?

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

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

आइए शुरू करते हैं

जैसा कि पहले कहा गया है, Vue सीखना आसान है, लेकिन यह शुरुआती भाषा नहीं है। कोड ब्लॉक के अंदर आपको अभी भी अपना रास्ता जानना होगा।

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

इस परियोजना को फिर से बनाने के लिए आपको वास्तव में क्या करना है, यह समझना आसान बनाने के लिए, ये आवश्यक कदम हैं:

1। Vue.js को संदर्भित करने वाली स्क्रिप्ट जोड़ें

गति अनुकूलन के लिए, इसे अपने सभी पृष्ठ सामग्री के बाद शामिल करना सबसे अच्छा है, लेकिन HTML स्रोत में बॉडी टैग बंद होने से ठीक पहले। आपके पास इस खंड में लोड करने वाले अन्य पेज संसाधन भी हो सकते हैं, और लोडिंग प्राथमिकता का क्रम निर्धारित करता है कि आपको प्रत्येक संसाधन किस क्रम में सम्मिलित करना चाहिए।

यहाँ एक सीडीएन से vue.js को शामिल करने का एक उदाहरण दिया गया है:

और यहाँ अपने स्वयं के सर्वर पर एक निर्देशिका से vue.js को शामिल करने का एक उदाहरण है:

Vue.js के इस संदर्भ के बिना, Vue से संबंधित कुछ भी नहीं हो सकता है।

2। अपने HTML शरीर में Vue घटकों को जोड़ें

कि इस कोड के साथ क्या हो रहा है:

अभी के लिए यह बहुत मायने नहीं रखता है, लेकिन Vue भाग खाली "डेमो-ग्रिड" तत्व है, साथ ही क्वेरी इनपुट के लिए "v- निर्देश" के अलावा (इस मामले में यह "v- मॉडल" है) ", जो इनपुट बनाने के लिए Vue कोड को बाइंड करने के लिए उपयोग किया जाता है)।

3। यदि प्रोजेक्ट को एक घटक टेम्पलेट की आवश्यकता है, तो इसे HTML निकाय में जोड़ें

कोड का यह भाग असामान्य है क्योंकि यह स्क्रिप्ट टैग के अंदर नियमित HTML जैसा दिखता है, जो अधिकांश HTML संपादन सॉफ़्टवेयर को भ्रमित करेगा (कुछ स्थानों पर संकेतक रंग गलत हैं)।

4। Vue उदाहरण जोड़ें

यह पृष्ठ पर प्रदर्शित होने वाली अंतिम चीजों में से एक होनी चाहिए, क्योंकि यह एक गतिशील प्रतिपादन कार्य कर रही है। यह पृष्ठ में पहले जोड़ने पर कुछ अनुकूलन लाभ प्रदान करता है।

  • लाइन 46 निर्दिष्ट करता है कि ब्राउज़र को "डेमो-ग्रिड" नामक पृष्ठ पर एक घटक की तलाश करनी चाहिए, और लाइन 47 निर्दिष्ट करता है कि "# ग्रिड-टेम्पलेट" को घटक के लिए टेम्पलेट के रूप में उपयोग किया जाना चाहिए (यह चरण के लिए जोड़ा गया टेम्पलेट कोड है) 3 लाइन 9 से लाइन 30 तक)।
  • लाइन 48 से लाइन 52 तक एक ब्लॉक घटक के गुणों को परिभाषित करता है।
  • तालिका में डेटा सॉर्ट करने के लिए 53 से 62 तक की रेखाएँ एक फ़ंक्शन को परिभाषित करती हैं।
  • लाइन्स 63 से 85 डेटा छानने के लिए एक फ़ंक्शन को परिभाषित करता है (खोज क्वेरी में परिणामों से)।
  • लाइन्स 86 से 90 एक डेटा सेट में शब्दों को कैपिटल करने के लिए एक फ़ंक्शन को परिभाषित करता है।
  • लाइन्स 91 से 97 डेटा सॉर्ट करने के लिए विधि को परिभाषित करते हैं।

5। समापन स्क्रिप्ट टैग से पहले लॉन्च कोड में जोड़ें

यदि आपने 1 पर 4 के चरण पूरे कर लिए हैं और ब्राउज़र में फ़ाइल खोल दी है, तो आप देखेंगे कि खोज बॉक्स और कुछ नहीं है। ऐसा इसलिए है क्योंकि तालिका के निर्माण के लिए आवश्यक हर चीज को परिभाषित किया गया है, लेकिन बनाया नहीं गया है। तो चरण 5 में, हम उस कोड को जोड़ते हैं जो वास्तव में वह तालिका बनाता है जिसे पिछले सभी चरणों द्वारा परिभाषित किया गया था।

  • लाइन 100 एक नया Vue ऑब्जेक्ट बनाता है।
  • लाइन 101 निर्दिष्ट करता है कि किस तत्व को कार्रवाई को बाँधना है।
  • 102 से 111 तक की रेखाएँ ऑब्जेक्ट डेटा प्रदान करती हैं जो तत्व के लिए बाध्य होगा।

परीक्षण

अपेक्षित ऑब्जेक्ट को परिभाषित और निर्मित करने के बाद, आप अब परिणाम का परीक्षण करने के लिए तैयार हैं। अभिभूत होने के लिए तैयार रहें, क्योंकि यही वह है जो आपको ब्राउज़र में देखना चाहिए:

क्या चल रहा है? यह इतना उबाऊ क्यों है? ऐसा इसलिए है क्योंकि वहाँ कोई स्टाइल लागू नहीं है। यदि हम JSFiddle उदाहरण से डिफ़ॉल्ट स्टाइल का उपयोग करते हैं, तो तालिका इस तरह दिखाई देगी:

खोज बॉक्स में कुछ भी टाइप करना (केस-संवेदी नहीं) तदनुसार परिणामों को फ़िल्टर करेगा:

कॉलम हेडर पर क्लिक करने से आप डिस्प्ले का क्रम बदल सकेंगे। उदाहरण के लिए, "पावर" कॉलम हेडर पर क्लिक करने से परिणाम पावर स्तर के क्रम में प्रदर्शित होने के लिए बदल जाएंगे।

सुधार और आदत डालना

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

यहां कुछ बदलाव दिए गए हैं जिनसे हम इस एप्लिकेशन को बदल सकते हैं कि यह कैसा दिखता है और यह क्या करता है:

  • तालिका को बूटस्ट्रैप धारीदार तालिका के रूप में शैली दें
  • कॉलम की संख्या बदलें
  • डेटा को पूरी तरह से कुछ अलग करने के लिए बदलें

1। बूटस्ट्रैप जोड़ना

2। बूटस्ट्रैप तालिका में तत्व लपेटना

3। बूटस्ट्रैप लेआउट मॉडल का उपयोग करने के लिए मूल तत्व को समायोजित करना

4। बाण चलाना

5। डेटा को संशोधित करना

6। परिक्षण

  • अनफिल्टर्ड और अनसोल्ड

  • निर्देशक द्वारा क्रमबद्ध (आरोही)

  • उपयोग के लिए सॉर्ट किया गया (आरोही)

  • "सशर्त" के लिए फ़िल्टर किया गया

  • "सशर्त" के लिए फ़िल्टर्ड और निर्देशन द्वारा क्रमबद्ध (आरोही)

अंतिम विचार

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

हेडर इमेज सौजन्य से अलेक्सांद्र साविक

बोगदान रैंकी

बोगदान इंसपायर्ड मैग का एक संस्थापक सदस्य है, जिसके पास इस अवधि में लगभग 6 वर्षों का अनुभव है। अपने खाली समय में वह शास्त्रीय संगीत का अध्ययन करना और दृश्य कला का पता लगाना पसंद करते हैं। वह भी Fixies के साथ काफी जुनूनी है। वह पहले से ही 5 का मालिक है।