Directives Vue.js में: उपयोग और उदाहरण

Directives Vue.js आपको DOM में तत्वों पर विशेष व्यवहार लागू करने की अनुमति देता है। वे v- वाक्यविन्यास के साथ उपसर्गित होते हैं और DOM में हेरफेर करने, घटनाओं को संभालने, तत्वों को सशर्त रूप से प्रस्तुत करने और बहुत कुछ करने के लिए उपयोग किए जाते हैं। Vue.js कई बिल्ट-इन प्रदान करता है directives जैसे, और, जो सामान्य उपयोग के मामलों की एक विस्तृत श्रृंखला को कवर करते हैं। v-if v-for v-bind v-on

यहाँ directives Vue.js में कुछ सामान्य हैं:

1. निर्देश: इस निर्देश का उपयोग किसी शर्त के आधार पर किसी तत्व को सशर्त रूप से प्रस्तुत करने के लिए किया जाता है। v-if

उदाहरण:

<div v-if="isShow">This element is only displayed if isShow is true.</div>

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

उदाहरण:

<ul>  
  <li v-for="item in items">{{ item }}</li>  
</ul>

3. निर्देश: इस निर्देश का उपयोग किसी अभिव्यक्ति के मूल्य को किसी तत्व की विशेषता या संपत्ति से बांधने के लिए किया जाता है। v-bind

उदाहरण:

<img v-bind:src="imageUrl">

4. निर्देश: इस निर्देश का उपयोग किसी तत्व पर घटनाओं को सुनने और संभालने के लिए किया जाता है। v-on

उदाहरण:

 <button v-on:click="handleClick">Click me!</button>

5. निर्देश: यह निर्देश एक इनपुट तत्व और एक डेटा प्रॉपर्टी के बीच दो-तरफा बंधन बनाता है। v-model

उदाहरण:

<input v-model="message">

directives ये Vue.js में कुछ बुनियादी बातें हैं। directives आप अपने Vue.js एप्लिकेशन में विशिष्ट व्यवहार करने के लिए अपना स्वयं का कस्टम भी बना सकते हैं ।