अपना पहला Vue.js घटक बनाना

Vue.js एक घटक-आधारित फ़्रेमवर्क है, जिसका अर्थ है कि एप्लिकेशन पुन: प्रयोज्य घटकों का उपयोग करके बनाए जाते हैं। प्रत्येक घटक अपने स्वयं के HTML, CSS और JavaScript को समाहित करता है। यह लेख आपको स्क्रैच से अपना पहला Vue.js घटक बनाने की प्रक्रिया के माध्यम से मार्गदर्शन करेगा।

नया Vue घटक बनाना

Vue.js घटक आम तौर पर .vue फ़ाइलों में संग्रहीत होते हैं। प्रत्येक घटक फ़ाइल में तीन मुख्य खंड होते हैं: '<template>', '<script>', और '<style>'। आइए Greeting.vue नामक एक सरल घटक बनाएँ।

अपने प्रोजेक्ट फ़ोल्डर पर जाएँ: अपने Vue प्रोजेक्ट निर्देशिका में जाने के लिए टर्मिनल का उपयोग करें:

cd my-vue-project

एक नई घटक फ़ाइल बनाएँ: src/components निर्देशिका में, Greeting.vue नामक एक नई फ़ाइल बनाएँ।

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

इस Greeting.vue घटक में शामिल हैं:

<template>: घटक की HTML संरचना को परिभाषित करता है.
<script>: घटक के लिए जावास्क्रिप्ट तर्क, जैसे डेटा गुण और विधियाँ शामिल करता है।
<style>: इस घटक के लिए स्कोप की गई CSS शैलियाँ शामिल हैं। scoped विशेषता यह सुनिश्चित करती है कि शैलियाँ केवल इसी घटक पर लागू होती हैं।

अपने घटक का उपयोग करना

घटक बनाने के बाद, आपको इसे अपने Vue एप्लिकेशन में उपयोग करना होगा। src/App.vue फ़ाइल खोलें और Greeting घटक को शामिल करने के लिए इसे संशोधित करें:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

इस अद्यतनित App.vue फ़ाइल में:

घटक आयात करें: Greeting घटक आयात करने के लिए import Greeting from './components/Greeting.vue'; का उपयोग करें।
घटक को पंजीकृत करें: export default ब्लॉक में components ऑब्जेक्ट में Greeting जोड़ें।
घटक का उपयोग करें: अपने ऐप में घटक का उपयोग करने के लिए '<Greeting />' टैग को '<template>' अनुभाग में डालें।

अपने घटक का परीक्षण करें

अपने परिवर्तनों को सहेजें और सुनिश्चित करें कि आपका विकास सर्वर चल रहा है। अपना ब्राउज़र खोलें और http://localhost:8080 पर जाएँ। आपको पृष्ठ पर रेंडर किए गए Greeting घटक की सामग्री दिखाई देनी चाहिए।

निष्कर्ष

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

Vue.js घटकों के साथ प्रयोग करते रहें और गतिशील और आकर्षक वेब अनुप्रयोग बनाने के लिए अपने ज्ञान का विस्तार करें।

vuejs घटक टेम्पलेट स्क्रिप्ट शैली बनाएँ आयात उपयोग ऐप विकास परीक्षण रेंडर प्रॉप्स ईवेंट