Vue.js tutorials with examples in hindi

 

Vue.js Tutorial in Hindi

Vue.js एक लोकप्रिय और लचीला JavaScript फ्रेमवर्क है, जिसका उपयोग खासकर यूज़र इंटरफेस और सिंगल-पेज एप्लिकेशन (SPA) बनाने के लिए किया जाता है। Vue.js को "Progressive Framework" कहा जाता है क्योंकि इसे आप धीरे-धीरे अपनी मौजूदा परियोजना में जोड़ सकते हैं और इसका पूरा उपयोग शुरू कर सकते हैं।

इस ट्यूटोरियल में हम Vue.js के बुनियादी कांसेप्ट्स और इसके उपयोग को विस्तार से समझेंगे। हम Vue.js की विशेषताओं और इसके साथ छोटे-छोटे उदाहरणों के साथ काम करेंगे।


Vue.js क्या है?

Vue.js एक JavaScript फ्रेमवर्क है, जिसका उद्देश्य वेब एप्लिकेशन बनाने के लिए सरल और हल्का समाधान प्रदान करना है। Vue.js को Evan You ने 2014 में विकसित किया था। यह फ्रेमवर्क मुख्य रूप से दो हिस्सों में काम करता है:

  1. UI (User Interface): Vue.js आपके यूज़र इंटरफेस को बनाने में मदद करता है, जहां आप डेटा और HTML के बीच एक कनेक्शन बना सकते हैं।
  2. Reactivity System: Vue.js में reactivity का मतलब है कि डेटा बदलने पर UI भी स्वतः अपडेट हो जाता है, जिससे आपको मैन्युअली DOM को अपडेट करने की आवश्यकता नहीं होती।

Vue.js के फायदे

  • सरलता: Vue.js सीखने और इस्तेमाल करने में आसान है। इसका सिंटैक्स काफी सीधा और समझने में आसान है।
  • कम से कम कोड: Vue.js आपको कम से कम कोड में ज्यादा कार्य करने की अनुमति देता है।
  • Reactiveness: Vue.js में reactivity का अच्छा सपोर्ट है, जिससे UI ऑटोमैटिकली डेटा चेंज के साथ अपडेट हो जाता है।
  • कम लोड टाइम: Vue.js बहुत हल्का है और इसकी गति काफी तेज है, जो इसे परफॉर्मेंस के लिहाज से प्रभावी बनाता है।
  • डेटा बाइंडिंग: Vue.js में डेटा बाइंडिंग के द्वारा आप UI और डेटा के बीच आसानी से कनेक्ट कर सकते हैं।

Vue.js का सेटअप करना

Vue.js को सेटअप करने के लिए हम दो तरीके देखेंगे:

1. CDN के माध्यम से Vue.js

आप Vue.js को सीधे अपने HTML पेज में CDN के माध्यम से भी जोड़ सकते हैं। यह सबसे आसान तरीका है Vue.js को प्रयोग में लाने का।

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js Example</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script> new Vue({ el: '#app', data: { message: 'नमस्ते, Vue.js!' } }); </script> </body> </html>

यह कोड एक message नामक डेटा प्रॉपर्टी को Vue instance में डिफाइन करता है, और HTML में {{ message }} सिंटैक्स का इस्तेमाल कर उसे दिखाता है।

2. Vue CLI के माध्यम से Vue.js प्रोजेक्ट बनाना

Vue.js के लिए आधिकारिक CLI (Command Line Interface) टूल है, जिसका उपयोग करके आप आसानी से Vue.js प्रोजेक्ट बना सकते हैं।

  1. सबसे पहले, Vue CLI को इंस्टॉल करें:

    bash
    npm install -g @vue/cli
  2. फिर, नया Vue प्रोजेक्ट बनाएं:

    bash
    vue create my-vue-app
  3. इस कमांड के बाद, आपको कुछ सवालों के उत्तर देने होंगे, जैसे कि "Default" या "Manually select features"।

  4. इसके बाद, प्रोजेक्ट के डायरेक्ट्री में जाएं और सर्वर चलाएं:

    bash
    cd my-vue-app npm run serve

यह आपके Vue प्रोजेक्ट को localhost पर चलाएगा।


Vue.js के बुनियादी कॉन्सेप्ट्स

1. Vue Instance

Vue का मुख्य हिस्सा Vue Instance होता है। यह एक जावास्क्रिप्ट ऑब्जेक्ट होता है जो Vue एप्लिकेशन को कंट्रोल करता है। Vue instance में data, methods, और computed जैसी प्रॉपर्टीज होती हैं, जो UI और डेटा के बीच इंटरएक्शन को मैनेज करती हैं।

उदाहरण:

html
<div id="app"> <h1>{{ message }}</h1> <button @click="changeMessage">संदेश बदलें</button> </div> <script> new Vue({ el: '#app', data: { message: 'नमस्ते, Vue.js!' }, methods: { changeMessage() { this.message = 'आपका दिन शुभ हो!'; } } }); </script>

यहां @click एक Vue.js का डायरेक्टिव है, जो क्लिक इवेंट को हैंडल करता है और changeMessage मेथड को कॉल करता है, जिससे message की वैल्यू बदल जाती है।

2. Data Binding

Vue.js में data binding का मतलब है कि आप UI में डेटा को आसानी से बाइंड कर सकते हैं। Vue.js दो तरह के डेटा बाइंडिंग को सपोर्ट करता है:

  1. Text Interpolation: {{ message }}
  2. Attribute Binding: v-bind

उदाहरण:

html
<div id="app"> <h1>{{ title }}</h1> <a v-bind:href="url">Google पर जाएं</a> </div> <script> new Vue({ el: '#app', data: { title: 'Vue.js में स्वागत है!', url: 'https://www.google.com' } }); </script>

यहां v-bind:href का इस्तेमाल किया गया है, जो url डेटा प्रॉपर्टी को लिंक के href एट्रिब्यूट से जोड़ता है।

3. Directives (डायरेक्टिव्स)

Vue.js में डायरेक्टिव्स का उपयोग HTML एलिमेंट्स के व्यवहार को नियंत्रित करने के लिए किया जाता है। कुछ प्रमुख डायरेक्टिव्स:

  • v-bind: एट्रिब्यूट्स को बाइंड करने के लिए।
  • v-model: डेटा बाइंडिंग के लिए (विशेषकर फॉर्म्स में)।
  • v-if, v-else: कंडीशनल रेंडरिंग के लिए।
  • v-for: लूप के लिए।
  • v-on: इवेंट हैंडलिंग के लिए।

उदाहरण:

html
<div id="app"> <button v-on:click="changeMessage">संदेश बदलें</button> <p v-if="showMessage">{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'यह एक संदेश है!', showMessage: true }, methods: { changeMessage() { this.message = 'संदेश बदल चुका है!'; } } }); </script>

यहां v-if का उपयोग किया गया है, जो showMessage वैरिएबल के आधार पर पैराग्राफ को रेंडर करता है।

4. Components (कंपोनेंट्स)

Vue.js में कंपोनेंट्स का उपयोग UI के पुनः उपयोग योग्य हिस्से बनाने के लिए किया जाता है। आप एक बार कंपोनेंट बना सकते हैं और उसे कई जगह इस्तेमाल कर सकते हैं।

उदाहरण:

html
<div id="app"> <my-component></my-component> </div> <script> Vue.component('my-component', { template: '<h2>यह मेरा पहला कंपोनेंट है!</h2>' }); new Vue({ el: '#app' }); </script>

यहां my-component नामक कंपोनेंट को रजिस्टर किया गया है और उसे HTML में इस्तेमाल किया गया है।


Vue.js के कुछ और महत्वपूर्ण फीचर्स

  1. Computed Properties: यह प्रॉपर्टीज हैं जो किसी डेटा की गणना करती हैं और UI में रेंडर होती हैं।

    उदाहरण:

    html
    <div id="app"> <h1>{{ reversedMessage }}</h1> </div> <script> new Vue({ el: '#app', data: { message: 'Vue.js' }, computed: { reversedMessage() { return this.message.split('').reverse().join(''); } } }); </script>
  2. Vue Router: यह Vue.js ऐप्लिकेशंस में रूटिंग के लिए प्रयोग किया जाता है। यह आपको सिंगल पेज एप्लिकेशन में विभिन्न पेजेस को हैंडल करने की सुविधा देता है।


निष्कर्ष

Vue.js एक बहुत ही सरल और शक्तिशाली JavaScript फ्रेमवर्क है जो वेब एप्लिकेशन को बनाना और मैनेज करना आसान बनाता है। इसके बुनियादी कॉन्सेप्ट्स जैसे कि Vue instance, Data Binding, Directives, Components, और Computed Properties को समझना महत्वपूर्ण है, क्योंकि ये सभी Vue.js के मुख्य कार्यों का हिस्सा हैं। Vue.js के माध्यम से आप वेब एप्लिकेशन को बहुत ही अधिक interactive और scalable बना सकते हैं।

Comments

Popular posts from this blog

PrimeNG tutorial with examples using frequently used classes

Docker and Kubernetes Tutorials and QnA

Building strong foundational knowledge in frontend development topics