Vue.js निर्देशों की मूल बातें

Vue.js निर्देश मार्कअप में विशेष टोकन हैं जो लाइब्रेरी को DOM तत्व के साथ कुछ करने के लिए कहते हैं। उन्हें v- के साथ उपसर्ग किया जाता है ताकि यह संकेत दिया जा सके कि वे Vue द्वारा प्रदान की गई विशेष विशेषताएँ हैं। निर्देश Vue.js की मुख्य विशेषताओं में से एक हैं, जो डेवलपर्स को DOM को कुशलतापूर्वक हेरफेर करने की अनुमति देते हैं।

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

Vue.js में सामान्यतः प्रयुक्त निर्देश

Vue.js में सबसे अधिक उपयोग किए जाने वाले कुछ निर्देश यहां दिए गए हैं:

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

v-bind: विशेषताओं को गतिशील रूप से बांधना

v-bind निर्देश का उपयोग किसी अभिव्यक्ति में विशेषताओं या गुणों को गतिशील रूप से बाँधने के लिए किया जाता है। उदाहरण के लिए, आप किसी img तत्व के src विशेषता को डेटा गुण से बाँध सकते हैं:

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

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

v-bind का संक्षिप्त रूप केवल एक कोलन (:) है, अतः उपरोक्त उदाहरण को इस प्रकार पुनः लिखा जा सकता है:

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

v-मॉडल: दो-तरफ़ा डेटा बाइंडिंग

v-model निर्देश का उपयोग फॉर्म इनपुट तत्वों पर दो-तरफ़ा डेटा बाइंडिंग बनाने के लिए किया जाता है। यह इनपुट तत्व और डेटा प्रॉपर्टी को सिंक में रखता है:

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

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

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

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

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

v-for: सूची रेंडरिंग

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

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

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

v-on: इवेंट हैंडलिंग

v-on निर्देश का उपयोग DOM तत्वों में ईवेंट श्रोताओं को जोड़ने के लिए किया जाता है। आप क्लिक, इनपुट और अन्य जैसे उपयोगकर्ता इंटरैक्शन को संभाल सकते हैं:

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

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

v-on का संक्षिप्त रूप at प्रतीक (@) है, अतः उपरोक्त उदाहरण को इस प्रकार पुनः लिखा जा सकता है:

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

v-show: दृश्यता टॉगल करें

v-show निर्देश का उपयोग किसी अभिव्यक्ति के आधार पर किसी तत्व की दृश्यता को टॉगल करने के लिए किया जाता है। v-if के विपरीत, यह DOM से तत्व को नहीं हटाता है; यह केवल display CSS प्रॉपर्टी को टॉगल करता है:

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: HTML रेंडर करना

v-html निर्देश का उपयोग किसी तत्व के आंतरिक HTML को अपडेट करने के लिए किया जाता है। यह तब उपयोगी होता है जब आपको अपने Vue घटकों में कच्चे HTML को रेंडर करने की आवश्यकता होती है:

<template>
  <div v-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

निष्कर्ष

Vue.js निर्देश DOM में हेरफेर करने और गतिशील और इंटरैक्टिव वेब एप्लिकेशन बनाने के लिए शक्तिशाली तरीके प्रदान करते हैं। v-bind, v-model, v-if, v-for, v-on, v-show, और v-html जैसे Vue.js निर्देशों की मूल बातें समझना किसी भी Vue डेवलपर के लिए आवश्यक है। इन निर्देशों में महारत हासिल करके, आप Vue.js के साथ अधिक मजबूत और सुविधा संपन्न एप्लिकेशन बना सकते हैं।