Vue.js टेम्प्लेट को समझना और वे कैसे काम करते हैं

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

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

Vue.js टेम्पलेट्स क्या हैं?

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

यहाँ Vue.js टेम्पलेट का एक मूल उदाहरण दिया गया है:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js Templates!'
    };
  }
};
</script>

इस उदाहरण में, टेम्पलेट में '<h1>' तत्व के साथ एक सरल HTML संरचना है। {{ message }} सिंटैक्स Vue के टेम्पलेट सिंटैक्स का एक उदाहरण है, जो डेटा प्रॉपर्टी message को '<h1>' तत्व से बांधता है।

टेम्पलेट सिंटैक्स और निर्देश

Vue.js टेम्प्लेट डेटा को बाइंड करने, सूचियों को रेंडर करने, तत्वों को सशर्त रूप से रेंडर करने और ईवेंट को संभालने के लिए विशेष सिंटैक्स और निर्देशों का उपयोग करते हैं। टेम्प्लेट में उपयोग किए जाने वाले कुछ सामान्य निर्देशों में शामिल हैं:

• v-bind: एक विशेषता को एक अभिव्यक्ति से बांधता है।
• v-model: फॉर्म इनपुट तत्वों पर दो-तरफ़ा डेटा बाइंडिंग बनाता है।
• v-if: किसी अभिव्यक्ति के आधार पर किसी तत्व को सशर्त रूप से प्रस्तुत करता है।
• v-for: किसी सारणी या ऑब्जेक्ट पर पुनरावृत्ति करके आइटमों की सूची प्रस्तुत करता है।
• v-on: किसी तत्व से ईवेंट श्रोता जोड़ता है।

v-bind के साथ विशेषताओं को बांधना

v-bind निर्देश का उपयोग HTML विशेषताओं को Vue इंस्टेंस डेटा से जोड़ने के लिए किया जाता है। यह आपको src, href, alt, और अधिक जैसी विशेषताओं को गतिशील रूप से सेट करने की अनुमति देता है।

<template>
  <img v-bind:src="imageUrl" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

v-bind का संक्षिप्त रूप केवल एक कोलन (:) है, जो टेम्पलेट को अधिक संक्षिप्त बनाता है:

<img :src="imageUrl" alt="Dynamic Image" />

v-on के साथ ईवेंट को संभालना

v-on निर्देश का उपयोग टेम्प्लेट में तत्वों को ईवेंट श्रोताओं को संलग्न करने के लिए किया जाता है। यह आपको कुछ ईवेंट ट्रिगर होने पर विधियों को निष्पादित करने की अनुमति देता है, जैसे कि क्लिक, माउस मूवमेंट या फ़ॉर्म सबमिशन।

<template>
  <button v-on:click="sayHello">Click Me</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      alert('Hello, Vue.js!');
    }
  }
};
</script>

v-bind की तरह, v-on निर्देश का भी एक संक्षिप्त संस्करण है, जो कि at प्रतीक (@) है:

<button @click="sayHello">Click Me</button>

v-if, v-else, और v-else-if के साथ सशर्त रेंडरिंग

Vue.js टेम्प्लेट v-if, v-else, और v-else-if निर्देशों का उपयोग करके सशर्त रेंडरिंग का समर्थन करते हैं। ये निर्देश आपको अभिव्यक्ति की सत्यता के आधार पर तत्वों को सशर्त रूप से रेंडर करने की अनुमति देते हैं।

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please log in.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    };
  }
};
</script>

v-for के साथ सूची रेंडरिंग

v-for निर्देश का उपयोग किसी सरणी या ऑब्जेक्ट पर पुनरावृत्ति करके आइटम की सूची प्रस्तुत करने के लिए किया जाता है। इसका उपयोग आमतौर पर Vue टेम्प्लेट में लूप में डेटा प्रदर्शित करने के लिए किया जाता है।

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

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

स्लॉट के साथ टेम्पलेट पुनः प्रयोज्यता

Vue.js <slot> के उपयोग के माध्यम से पुन: प्रयोज्य और संयोजनीय घटकों की अनुमति देता है। स्लॉट चाइल्ड घटकों में सामग्री को पास करने का एक तरीका प्रदान करते हैं और लचीले और पुन: प्रयोज्य टेम्पलेट्स की अनुमति देते हैं।

<template>
  <div>
    <slot>Default content if no slot content provided</slot>
  </div>
</template>

फिर आप इस घटक का उपयोग कर सकते हैं और इसके स्लॉट में कस्टम सामग्री पास कर सकते हैं:

<template>
  <my-component>
    <p>Custom content inside the slot</p>
  </my-component>
</template>

निष्कर्ष

Vue.js टेम्प्लेट एक शक्तिशाली सुविधा है जो उपयोगकर्ता इंटरफ़ेस बनाने का एक सरल लेकिन लचीला तरीका प्रदान करती है। v-bind, v-on, v-if, v-for और स्लॉट जैसे निर्देशों का उपयोग करके, आप गतिशील, प्रतिक्रियाशील और पुन: प्रयोज्य घटक बना सकते हैं। कुशल और रखरखाव योग्य एप्लिकेशन बनाने के लिए Vue.js टेम्प्लेट को समझना और उसमें महारत हासिल करना आवश्यक है।