Nuxt.js में कस्टम निर्देशिका बनाना

कई पेजों या घटकों में DOM पर लागू होने वाले सामान्य कार्यों को

कस्टम निर्देशों के रूप में बनाना आसान है।

हम एक स्क्रॉल निर्देश उदाहरण बनाना चाहते हैं।

- मुख्य स्क्रीन या विस्तृत पृष्ठों पर स्क्रॉल करते समय डेटा लोड करना, स्क्रॉल करते समय टोस्ट दिखाना आदि उपयोगी है।

1. सबसे पहले, फ़ाइल बनाएँ और इसे Nuxt प्लगइन में रजिस्टर करें।

Nuxt कॉन्फ़िगरेशन प्लगइन्स परिभाषित फ़ाइलों को निष्पादित करते हैं जब Nuxt एप्लिकेशन इनिशियलाइज़ किया जाता है, जिससे विशिष्ट क्रियाएँ सक्षम होती हैं। = विशिष्ट कार्यों को वैश्विक स्तर पर उपयोग किया जा सकता है।

2. स्क्रॉल निर्देश को लागू करें।

घटक में कॉलबैक फ़ंक्शन भेजने के लिए इसे लागू किया गया है।

3. अब पेज पर v-scroll का उपयोग करें।

अन्य

कस्टम निर्देश बनाते समय कई हुक होते हैं जिनका उपयोग किया जा सकता है।

1. bind(el, binding, vnode)
व्याख्या: निर्देश को पहली बार एलिमेंट से बाइंड करते समय केवल एक बार कॉल किया जाता है।

यहाँ आप बाइंड किए गए एलिमेंट की प्रारंभिक सेटिंग कर सकते हैं।

तर्क

el: वह DOM एलिमेंट जिससे निर्देश बाइंड है
binding: एक ऑब्जेक्ट जिसमें निर्देश का मान, एक्सप्रेशन और तर्क होते हैं
vnode: Vue कंपाइलर द्वारा बनाया गया वर्चुअल नोड

2. inserted(el, binding, vnode)

व्याख्या: जब बाइंड किया गया एलिमेंट DOM में डाला जाता है तो इसे कॉल किया जाता है। दूसरे शब्दों में, इसका उपयोग तब किया जाता है जब निर्देश वास्तव में DOM में जोड़ा जाता है।

* स्क्रॉल इवेंट बाइंडिंग कोड में, यह DOM से संबंधित कार्यों को निष्पादित करने के लिए inserted हुक समय पर उपयोग किया जाता है।

3. update(el, binding, vnode, oldVnode)

व्याख्या: जब बाइंड किए गए एलिमेंट के गुण या मान बदलते हैं तो इसे कॉल किया जाता है।

हालांकि, यह अभी भी चाइल्ड घटकों को अपडेट करने से पहले की स्थिति है।

जब बाइंडिंग मान बदलते हैं तो इसका उपयोग DOM कार्यों को करने के लिए किया जाता है।

तर्क

oldVnode: पहले रेंडर किया गया वर्चुअल नोड

4. componentUpdated(el, binding, vnode, oldVnode)

व्याख्या: बाइंड किए गए एलिमेंट के गुण या मान अपडेट होने के बाद और चाइल्ड घटकों के भी अपडेट होने के बाद इसे कॉल किया जाता है।

दूसरे शब्दों में, यह अंतिम DOM स्थिति में किया जाता है। यह चाइल्ड घटक मानों के बदलने की प्रतीक्षा करता है और फिर इसे निष्पादित करता है।

5. unbind(el, binding, vnode)

व्याख्या: जब निर्देश अब एलिमेंट पर लागू नहीं होता है और एलिमेंट नष्ट हो जाता है तो इसे कॉल किया जाता है।

इस समय, इवेंट लिसनर को हटाया जाता है, और सफाई का काम किया जाता है।

* स्क्रॉल कस्टम उदाहरण में, अनबाइंड समय पर इवेंट लिसनर को साफ़ किया जाता है।