निर्देश (Directives)
Vue.js (व्यू जेएस) में निर्देश (Directives) विशेष एट्रिब्यूट्स होते हैं जो DOM तत्वों के व्यवहार को नियंत्रित करते हैं। ये आम तौर पर "v-" प्रीफिक्स के साथ शुरू होते हैं और डेवलपर्स को reactivity और declarative तरीके से इंटरफेस बनाने की अनुमति देते हैं। निर्देश का ज्ञान और सही उपयोग महत्वपूर्ण है क्योंकि यह एप्लिकेशन की कार्यक्षमता, प्रदर्शन और maintainability को सीधे प्रभावित करता है।
निर्देशों का उपयोग विभिन्न परिदृश्यों में किया जाता है: v-if या v-show के माध्यम से तत्वों की conditional rendering, v-for के साथ array या object iteration, v-model के साथ form inputs की bidirectional binding, और v-on के साथ event handling। इनका उपयोग करने के लिए Vue.js (व्यू जेएस) की syntax, data structures, algorithms और OOP principles की समझ आवश्यक है।
इस ट्यूटोरियल में आप सीखेंगे कि कैसे built-in directives का उपयोग करें और custom directives बनाएँ, ताकि DOM logic को encapsulate किया जा सके। उदाहरणों में reactive data structures, optimized algorithms और memory leaks एवं errors से बचने के लिए सुरक्षित तरीके दिखाए गए हैं। पाठक वास्तविक परियोजनाओं में directives का प्रभावी उपयोग करना सीखेंगे और Vue.js (व्यू जेएस) में scalable और maintainable components बनाना सीखेंगे।
मूल उदाहरण <template>
text<div>
<h1 v-if="isVisible">Vue.js में निर्देश का स्वागत है</h1>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<input v-model="newItem" placeholder="नया आइटम जोड़ें" />
<button @click="addItem">जोड़ें</button>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
newItem: '',
items: [
{ id: 1, name: 'आइटम 1' },
{ id: 2, name: 'आइटम 2' }
]
};
},
methods: {
addItem() {
if (this.newItem.trim() !== '') {
this.items.push({ id: this.items.length + 1, name: this.newItem });
this.newItem = '';
}
}
}
};
</script>इस मूल उदाहरण में कई मुख्य निर्देश दिखाए गए हैं। v-if तत्व की प्रदर्शनी को isVisible boolean के आधार पर नियंत्रित करता है। v-for items array पर iteration करता है, जबकि :key attribute list items की uniqueness सुनिश्चित करता है और virtual DOM के efficient update में मदद करता है।
input field में v-model के माध्यम से bidirectional binding लागू की गई है, जिससे यूजर इनपुट automatic data source के साथ sync रहता है। addItem method input को validate करता है और नए आइटम को array में जोड़ता है, साथ ही input को reset करता है। यह उदाहरण दिखाता है कि directives डेटा structures और methods के साथ कैसे interact करते हैं और best practices का पालन करते हुए memory leaks और errors से बचा जा सकता है।
व्यावहारिक उदाहरण <template>
text<div>
<h2 v-show="showTasks">कार्य सूची</h2>
<ul>
<li v-for="task in tasks" :key="task.id">
<input type="checkbox" v-model="task.completed" /> {{ task.name }}
<button @click="removeTask(task.id)">हटाएँ</button>
</li>
</ul>
<input v-model="newTask" placeholder="नई कार्य जोड़ें" />
<button @click="addTask">जोड़ें</button>
</div>
</template>
<script>
export default {
data() {
return {
showTasks: true,
newTask: '',
tasks: [
{ id: 1, name: 'कोड समीक्षा', completed: false },
{ id: 2, name: 'डॉक्यूमेंटेशन लिखें', completed: true }
]
};
},
methods: {
addTask() {
const name = this.newTask.trim();
if (name) {
this.tasks.push({ id: Date.now(), name, completed: false });
this.newTask = '';
}
},
removeTask(id) {
this.tasks = this.tasks.filter(task => task.id !== id);
}
}
};
</script>इस व्यावहारिक उदाहरण में directives के वास्तविक उपयोग को दर्शाया गया है। v-show के माध्यम से heading की visibility नियंत्रित की जाती है, जिससे frequent toggle के दौरान DOM performance बेहतर रहती है। v-for और :key का उपयोग tasks array की efficient iteration के लिए किया गया है। v-model checkbox के साथ bind होता है, जिससे completed status reactivity के साथ sync रहता है।
Vue.js (व्यू जेएस) best practices में :key का consistent use, computed properties का use complex calculations के लिए, और direct DOM manipulation को minimize करना शामिल है। v-show frequent show/hide operations के लिए उपयुक्त है। v-model के input values हमेशा validate करें।
Common mistakes में overuse of v-if/v-show, large arrays पर inefficient iteration और unremoved event listeners शामिल हैं। Vue DevTools debugging और reactivity monitoring में मदद करता है। Optimization techniques में lazy-loading, caching of computed properties और careful data mutation शामिल हैं। Security के लिए v-html का direct use avoid करें, ताकि XSS attacks से बचा जा सके।
📊 संदर्भ तालिका
| Vue.js (व्यू जेएस) Element/Concept | Description | Usage Example |
|---|---|---|
| v-if | Conditional rendering element | <div v-if="isVisible">दिखाएँ</div> |
| v-show | Visibility toggle without removing from DOM | <div v-show="isVisible">दिखाएँ</div> |
| v-for | Array/Object iteration | <li v-for="item in items" :key="item.id">{{ item.name }}</li> |
| v-model | Bidirectional binding of inputs | <input v-model="newItem" /> |
| v-on | Event binding to methods | <button @click="addItem">जोड़ें</button> |
| Custom Directives | Reusable DOM logic encapsulation | Vue.directive('focus', { inserted: el => el.focus() }) |
निर्देशों की mastery से developers DOM को efficiently और reactively control कर सकते हैं। Built-in directives जैसे v-if, v-show, v-for, v-model और v-on आम use cases को cover करते हैं। Custom directives complex DOM logic को encapsulate कर reusability बढ़ाते हैं।
Directive mastery के बाद, developers advanced topics जैसे Vuex state management, dynamic components, performance optimization और reactive algorithm design की ओर बढ़ सकते हैं। इसे real-world projects में implement करना, performance analyze करना और data structures optimize करना recommended है। Official documentation, community tutorials और open-source projects अतिरिक्त learning resources प्रदान करते हैं।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी