Vue.js ने प्रगतिशील जावास्क्रिप्ट ढांचे के रूप में अपनी प्रतिष्ठा अर्जित की है। आप सिंगल-पेज एप्लिकेशन (एसपीए) बनाने या विशिष्ट यूजर इंटरफेस विकसित करने के लिए Vue.js का उपयोग कर सकते हैं।

यहां आप Vue.js की मूल बातें सीखेंगे, जिसमें Vue कंपोनेंट कैसे बनाया जाए और डायनामिक डेटा रेंडर करने के लिए विकल्प ऑब्जेक्ट के साथ काम करना शामिल है।

Vue.js इनमें से एक है सबसे लोकप्रिय जावास्क्रिप्ट फ्रेमवर्क. Vue के साथ आरंभ करने के लिए, और इसे अपने HTML पेज में जोड़ने के लिए, नीचे दिए गए स्क्रिप्ट टैग को कॉपी करें और इसे हेड सेक्शन में पेस्ट करें:

<लिखी हुई कहानीस्रोत="">लिखी हुई कहानी>

सीडीएन लिंक का उपयोग स्थिर एचटीएमएल में सुधार करने या अपने आवेदन में कार्यक्षमता जोड़ने का एक उत्कृष्ट विकल्प है।

हालाँकि, आपको इसकी अधिक उन्नत सुविधाओं का उपयोग करने के लिए npm के माध्यम से Vue.js को स्थापित करने की आवश्यकता है, जैसे कि सिंगल-फाइल कंपोनेंट (SFC) सिंटैक्स, जो पूर्ण विकसित Vue ऐप्स बनाते समय सहायक होते हैं।

एक Vue एप्लिकेशन बनाना

CDN लिंक के माध्यम से Vue लाइब्रेरी तक पहुँचना सहित एक Vue ऑब्जेक्ट प्रदान करता है .क्रिएटऐप () तरीका।

जैसा कि नाम से ही स्पष्ट है, आप इस विधि का उपयोग करके एक Vue ऐप बना सकते हैं।

उदाहरण के लिए:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<शीर्षक>वीयू ऐपशीर्षक>
<लिखी हुई कहानीस्रोत=" https://unpkg.com/vue@3/dist/vue.global.js">लिखी हुई कहानी>
सिर>
<शरीर>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp ();
लिखी हुई कहानी>
शरीर>
एचटीएमएल>

यहां क्रिएट किए गए ऐप को स्टोर किया जाता है अनुप्रयोग चर। ऐप इंस्टेंस बनाने के बाद, आपको इसका उपयोग करके रेंडर करना होगा माउंट () तरीका। यह मेथड बताती है कि ऐप को कहां माउंट करना है दस्तावेज़ ऑब्जेक्ट मॉडल (DOM).

जैसे इतना:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<शीर्षक>वीयू ऐपशीर्षक>
<लिखी हुई कहानीस्रोत=" https://unpkg.com/vue@3/dist/vue.global.js">लिखी हुई कहानी>
सिर>
<शरीर>
<डिवपहचान="अनुप्रयोग">डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp ();
 ऐप.माउंट ("#ऐप");
लिखी हुई कहानी>
शरीर>
एचटीएमएल>

वू का उपयोग करने के लिए माउंट () विधि, आपको एक तर्क के रूप में एक DOM तत्व या चयनकर्ता प्रदान करना होगा। इस उदाहरण में, हमने DOM एलिमेंट का उपयोग करके Vue ऐप को माउंट किया है #अनुप्रयोग पहचान।

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

Vue एप्लिकेशन बनाने का अंतिम चरण कॉल करना है माउंट () सभी ऐप कॉन्फ़िगरेशन को पूरा करने के बाद विधि।

Vue में विकल्प वस्तु

Vue.js में, आप उपयोग करते हैं विकल्प Vue उदाहरण या घटक बनाने के लिए कॉन्फ़िगरेशन ऑब्जेक्ट के रूप में ऑब्जेक्ट।

यह Vue एप्लिकेशन का एक अनिवार्य हिस्सा है क्योंकि यह प्रत्येक उदाहरण या घटक के व्यवहार और डेटा को परिभाषित करता है। विकल्प ऑब्जेक्ट में उदाहरण या घटक के विभिन्न पहलुओं का प्रतिनिधित्व करने वाले कई गुण होते हैं।

में आमतौर पर इस्तेमाल होने वाले कुछ गुण विकल्प वस्तु हैं:

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

ध्यान दें कि टेम्प्लेट प्रॉपर्टी का उपयोग करते समय, Vue कंपाइलर केवल टेम्प्लेट में परिभाषित सामग्री को रेंडर करेगा।

यहाँ एक Vue ऐप का उदाहरण दिया गया है आंकड़े, तरीके, और खाका गुण:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<शीर्षक>वीयू ऐपशीर्षक>
<लिखी हुई कहानीस्रोत=" https://unpkg.com/vue@3/dist/vue.global.js">लिखी हुई कहानी>
सिर>
<शरीर>
<डिवपहचान="अनुप्रयोग">
<एच 1 @क्लिक="रिवर्समैसेज" >{{ मूलपाठ }}एच 1>
डिव>
<लिखी हुई कहानी>
कॉन्स्ट ऐप = Vue.createApp ({
// टेम्प्लेट: '
आपके वीयू ऐप में आपका स्वागत है
',
 आंकड़े() {
वापस करना {
 मूलपाठ: "यह आपका Vue ऐप है"
 };
 },
 तरीके: {
 रिवर्समैसेज () {
यहपाठ = यह.text.split(''.रिवर्स ()। शामिल हों ('')
 }
 }
 });
अनुप्रयोगमाउंट("#अनुप्रयोग");
लिखी हुई कहानी>
शरीर>
एचटीएमएल>

यह प्रोग्राम एक मूल Vue ऐप को दर्शाता है जो टेक्स्ट इंटरपोलेशन का उपयोग करके "यह आपका Vue ऐप है" टेक्स्ट प्रदर्शित करता है और उपयोगकर्ताओं को संदेश को उलटने के लिए उस पर क्लिक करने की अनुमति देता है।

आंकड़े() फ़ंक्शन किसी ऑब्जेक्ट को एकल संपत्ति के साथ लौटाता है मूलपाठ. @क्लिक करें निर्देश a संलग्न करने के लिए प्रयोग किया जाता है उल्टा संदेश () विधि को तत्व, जो उलट देता है मूलपाठ संपत्ति।

इस प्रोग्राम को चलाने पर बनाया गया Vue ऐप इस तरह दिखेगा:

टेक्स्ट पर क्लिक करने से यह उल्टा हो जाएगा।

ध्यान दें कि Vue ऐप में सामग्री को रेंडर करने की अनुमति देने के लिए प्रोग्राम ने टेम्प्लेट प्रॉपर्टी पर टिप्पणी की। यदि बिना किसी टिप्पणी के छोड़ दिया जाता है, तो यह Vue ऐप केवल एक टेम्प्लेट गुण दिखाएगा:

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

Vue में टेक्स्ट इंटरपोलेशन

Vue में टेक्स्ट इंटरपोलेशन एक ऐसी सुविधा है जो आपको डेटा को गतिशील रूप से HTML तत्वों से बाइंड करने की अनुमति देती है। दूसरे शब्दों में, यह आपको HTML में Vue उदाहरण के डेटा गुणों के मान को सीधे आउटपुट करने में सक्षम करेगा।

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

उदाहरण के लिए:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<शीर्षक>वीयू ऐपशीर्षक>
<लिखी हुई कहानीस्रोत=" https://unpkg.com/vue@3/dist/vue.global.js">लिखी हुई कहानी>
सिर>
<शरीर>
<डिवपहचान="अनुप्रयोग">
<एच 1>{{ संदेश }}एच 1>
<पी>स्वागत है {{नाम}}पी>
डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े() {
 वापस करना {
 संदेश: "यह आपका Vue ऐप है।",
 नाम: "नोबल",
 };
 },
 });
 ऐप.माउंट ("#ऐप");
लिखी हुई कहानी>
शरीर>
एचटीएमएल>

इस उदाहरण में, टेक्स्ट इंटरपोलेशन को बांधता है संदेश और नाम Vue उदाहरण में लौटाए गए डेटा ऑब्जेक्ट के गुण और तत्व। एक बार Vue एप्लिकेशन माउंट होने के बाद, यह के मान प्रदर्शित करता है संदेश और नाम HTML में उनके संबंधित पदों पर गुण।

आप एक विधि कॉल का परिणाम भी प्रदर्शित कर सकते हैं या डबल कर्ली ब्रैकेट के भीतर बुनियादी जावास्क्रिप्ट संचालन कर सकते हैं:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<शीर्षक>वीयू ऐपशीर्षक>
<लिखी हुई कहानीस्रोत=" https://unpkg.com/vue@3/dist/vue.global.js">लिखी हुई कहानी>
सिर>
<शरीर>
<डिवपहचान="अनुप्रयोग">
<एच 1>{{ संदेश }}एच 1>
<h3>स्वागत है {{name.toUpperCase() }}h3>
<पी>आपके नाम में {{nameLength()}} अक्षर हैं।पी>
डिव>
<पी>यहाँ नहींपी>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े() {
 वापस करना {
 संदेश: "यह आपका Vue ऐप है",
 नाम: "नोबल ओकाफोर",
 };
 },
 तरीके: {
 नाम लंबाई () {
 इसे वापस करें। नाम। लंबाई - 1;
 },
 },
 });
 ऐप.माउंट ("#ऐप");
लिखी हुई कहानी>
शरीर>
एचटीएमएल>

इस उदाहरण में, Vue ऐप में a आंकड़े वस्तु जिसमें दो गुण होते हैं: संदेश और नाम।

Vue ऐप के अंदर, तीन HTML तत्व Vue इंस्टेंस का उपयोग करके डेटा प्रदर्शित करते हैं। एच 1 तत्व का मान प्रदर्शित करता है संदेश संपत्ति, जबकि h3 तत्व का मान प्रदर्शित करता है नाम ए के साथ संपत्ति toUpperCase () उस पर लागू होने वाली विधि।

पी तत्व के लौटे परिणाम प्रदर्शित करता है नाम लंबाई () विधि में परिभाषित किया गया है तरीकों Vue ऐप का ऑब्जेक्ट। नाम लंबाई () विधि की लंबाई लौटाता है नाम संपत्ति एक से घटाया।

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

यह Vue ऐप प्रदर्शित करता है कि टेक्स्ट इंटरपोलेशन का उपयोग करके HTML तत्वों में डेटा को कैसे बाइंड किया जाए और Vue उदाहरण में विधियों को कैसे परिभाषित और कॉल किया जाए।

Vue का उपयोग करके अपना फ्रंट-एंड बनाएं

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