तपाई कस्तरी कस्टम निर्देशन (directive) सिर्जना गर्नुहुन्छ?

Question

Accepted Answer

**कस्टम निर्देशन** ले तपाईलाई **निम्न-स्तरको DOM हेरफेर** को रूपमा पुनः प्रयोज्य `v-*` विशेषता को रूपमा समेट्न देय। तपाईलाई एक तत्वमा सीधा पहुँच (ध्यान केन्द्रण, स्क्रोल, तृतीय-पक्षको DOM लाइब्रेरी) को आवश्यकता पर्दा तिनीहरूलाई प्रयोग गर्नुहोस् — यी चीजहरू कम्पोनेन्ट/प्रोपोस प्राकृतिकरूपमा कभर गर्दैनन्। ## स्थानीय निर्देशन परिभाषित गर्दै ```vue ``` नामकरण परम्परा: एक चर `vFocus` `v-focus` निर्देशन बन्छ। ## निर्देशन हुकस् (घटक जीवनचक्र मिरर गर्दै) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## बाइन्डिङ मान र तर्क प्रयोग गर्दै ```vue ``` `binding` वस्तु `value` (अभिव्यक्ति), `arg` (कोलनको पछाड़), `modifiers` (डटको पछाड़), र `oldValue` बोक्छ। ## व्यावहारिक उदाहरण: click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## विश्वव्यापी दर्ता ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## किन यो महत्त्वपूर्ण छ कस्टम निर्देशन **पुनः प्रयोज्य, निम्न-स्तरको DOM आचरण** को लागि सही उपकरण हो — स्वतः ध्यान केन्द्रण, क्लिक-बाहिर, छवि आलस-लोडिङ, टुलटिप्स, गैर-Vue DOM लाइब्रेरी एकीकृत गर्दै। तिनीहरूले यस्तो अनिवार्य DOM तर्क को रूपमा समेट राख्छन् र घोषणात्मक (`v-click-outside`) बरु जीवनचक्र हुकमा फैलिएको हुन्छ। हुकस् र `binding` वस्तु (मान/तर्क/संशोधकहरू), प्लस `unmounted` मा सफाई गर्ने को ज्ञान राख्दै, तिनीहरूको व्यावहारिक प्रयोग कभर गर्छ — यद्यपि अधिकांश UI तर्कको लागि, कम्पोनेन्टहरू अझै पनि राम्रो विकल्प हुन्।