मिक्सिन और कस्टम डायरेक्टिव
मिक्सिन के साथ लॉजिक का पुनः उपयोग करें और कस्टम डायरेक्टिव बनाएँ।
मिक्सिन और कस्टम डायरेक्टिव, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 3 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
Logic का पुनः उपयोग
जैसे-जैसे apps बढ़ते हैं, आपको एक ही logic कई components में दिखाई देता है। Vue इसे साझा करने के कई तरीके देता है। इस lesson में हम दो तरीकों को देखेंगे: पुराना mixins approach और शक्तिशाली custom directives।
Mixin क्या है?
mixin component options (data, methods, hooks) वाला एक object है, जिसे इसका उपयोग करने वाले किसी भी component में merge कर दिया जाता है। Vue 2 में logic का पुनः उपयोग करने का यह पारंपरिक तरीका था।
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}Mixin का उपयोग करना
mixins array के माध्यम से किसी component में mixin जोड़ें। इसके options component के अपने options के साथ merge हो जाते हैं।
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}Mixin की कमियाँ
Mixins में वास्तविक समस्याएँ हैं: यह स्पष्ट नहीं होता कि कोई property कहाँ से आई है (implicit source), अलग-अलग mixins के बीच नाम टकरा सकते हैं और merge rules उलझन भरे हो जाते हैं। इन्हीं कठिनाइयों के कारण एक बेहतर approach सामने आया।
Composables: बेहतर तरीका
Vue 3 में composables (Composition API का उपयोग करने वाले functions) mixins की जगह लेते हैं। ये sources को स्पष्ट बनाते हैं, नामों के टकराव से बचाते हैं और साफ़-सुथरे ढंग से compose होते हैं। नए code के लिए इन्हें प्राथमिकता दें।
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Composable का उपयोग करना
setup में composable को call करें और ठीक वही चीज़ें destructure करें जिनकी आपको आवश्यकता है; source स्पष्ट और प्रत्यक्ष दिखाई देता है।
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Custom Directive क्या है?
custom directive low-level DOM behavior को एक package में रखता है, जिसे आप v-name के साथ elements पर लगा सकते हैं। यह focus, scrolling या tooltips जैसे सीधे DOM manipulation के लिए उपयोगी है।
Global Directive register करना
app.directive के साथ app पर directive register करें। Templates में इसके नाम का उपयोग v- prefix के साथ किया जाता है।
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />Directive Hooks
Directives में lifecycle hooks होते हैं: mounted (element insert होने पर), updated (component update होने पर), beforeUnmount (cleanup से पहले) और अन्य, जो component lifecycle के अनुरूप होते हैं।
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})Binding Object
दूसरे hook का argument binding होता है। इसमें value (दिया गया value), arg (colon के बाद का भाग) और modifiers (dots के बाद का भाग) होता है।
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }Local Directives
केवल एक component में उपयोग होने वाली directives के लिए उन्हें globally register करने के बजाय directives option के साथ locally register करें।
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}त्वरित जाँच
Mixins और directives के अपने ज्ञान की जाँच करें।
पुनरावलोकन
Mixins options को components में merge करते हैं, लेकिन implicit sources और name clashes जैसी समस्याओं से ग्रस्त होते हैं; Vue 3 में composables को प्राथमिकता दें। Custom directives, जिन्हें app.directive के साथ या locally register किया जाता है, mounted जैसे hooks और एक binding object का उपयोग करके DOM behavior को package करते हैं। अब आप functionality को एक reusable plugin के रूप में package करेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 42
- पाठ
- 156
अक्सर पूछे जाने वाले प्रश्न
क्या “मिक्सिन और कस्टम डायरेक्टिव” पाठ निःशुल्क है?
हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “मिक्सिन और कस्टम डायरेक्टिव” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“मिक्सिन और कस्टम डायरेक्टिव” में मैं क्या सीखूँगा?
मिक्सिन के साथ लॉजिक का पुनः उपयोग करें और कस्टम डायरेक्टिव बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 1वाँ पाठ है।
“मिक्सिन और कस्टम डायरेक्टिव” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- मिक्सिन और कस्टम डायरेक्टिव
- प्लगइन विकास
- स्केलेबल फ़ोल्डर संरचना