यह AI द्वारा अनुवादित पोस्ट है।

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

लिखने की भाषा: कोरियाई
•
मानक देश: सभी देश
•
आईटी

뚠뚠멍

14 घंटे पहले

durumis AI द्वारा सारांशित पोस्ट

यह लेख बताता है कि Nuxt.js में कस्टम निर्देशिका का उपयोग करके पृष्ठों या घटकों पर सामान्य कार्य कैसे लागू किए जाते हैं।
स्क्रॉल निर्देशिका के उदाहरण के रूप में, `bind`, `inserted`, `update`, `componentUpdated`, `unbind` जैसे हुक फंक्शन का उपयोग करके स्क्रॉल ईवेंट के अनुसार क्रिया को लागू किया जाता है, और इसे Nuxt प्लगइन में पंजीकृत करके इसे वैश्विक रूप से उपयोग किया जा सकता है।
DOM संचालन और ईवेंट लिसनर प्रबंधन के लिए प्रत्येक हुक की भूमिका और उपयोग समय को विस्तार से समझाया गया है।

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

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

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

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

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


// nuxt.config.js
export default {
    plugins: [
    '~/plugins/v-scroll.js', // प्लगइन रजिस्ट्रेशन
    ],
}

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

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


// plugins/v-scroll.js
import Vue from 'vue';

// कस्टम निर्देश रजिस्ट्रेशन
Vue.directive('scroll', {
    inserted(el, binding) {
        const callback = binding.value.callback; // प्रेषित कॉलबैक फ़ंक्शन
        const offset = binding.value.offset || 0; // कस्टम ऑफसेट (डिफ़ॉल्ट 0)

        // स्क्रॉल इवेंट हैंडलर
        const onScroll = () => {
              const scrollPosition = window.scrollY + window.innerHeight;
              const elementPosition = el.offsetTop + offset;

              if (scrollPosition >= elementPosition) {
                callback();
              }
        };

    // स्क्रॉल इवेंट लिसनर रजिस्ट्रेशन
    window.addEventListener('scroll', onScroll);

    // एलिमेंट अनबाइंड होने पर इवेंट लिसनर को हटाना
    el._onScroll = onScroll;},
    unbind(el) {
        // स्क्रॉल इवेंट लिसनर को हटाना
        window.removeEventListener('scroll', el._onScroll);
        delete el._onScroll;
    }
});

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

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


<template>
    <div v-scroll="{callback: loadMore, offset: 100}">
    </div>
</template>
<script>
export default {
    //...छोड़ा गया
    methods: {
        loadMore() {
            //अधिक डेटा प्राप्त करें (फ़ेच, एक्सियोस इत्यादि...)
            
        }
    }

}

</script>

अन्य

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

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

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

तर्क

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


Vue.directive('color', {
    bind(el, binding) {
    // निर्देश को बाइंड करते समय टेक्स्ट रंग सेट करें
    el.style.color = binding.value;
    }
});

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)

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

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

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

विषय

#nuxt.js
#कस्टम निर्देशिका

durumis AI द्वारा सारांशित पोस्ट

यह लेख बताता है कि Nuxt.js में कस्टम निर्देशिका का उपयोग करके पृष्ठों या घटकों पर सामान्य कार्य कैसे लागू किए जाते हैं।
स्क्रॉल निर्देशिका के उदाहरण के रूप में, `bind`, `inserted`, `update`, `componentUpdated`, `unbind` जैसे हुक फंक्शन का उपयोग करके स्क्रॉल ईवेंट के अनुसार क्रिया को लागू किया जाता है, और इसे Nuxt प्लगइन में पंजीकृत करके इसे वैश्विक रूप से उपयोग किया जा सकता है।
DOM संचालन और ईवेंट लिसनर प्रबंधन के लिए प्रत्येक हुक की भूमिका और उपयोग समय को विस्तार से समझाया गया है।