Tekst przetłumaczony przez AI.

Tworzenie niestandardowych dyrektyw w Nuxt.js

Język pisania: Koreański
•
Kraj odniesienia: Wszystkie kraje
•
TO

뚠뚠멍

12 godz. temu

Podsumowanie posta wygenerowane przez AI durumis

Artykuł wyjaśnia, jak wykorzystać niestandardowe dyrektywy w Nuxt.js do zastosowania wspólnych funkcji na stronach lub komponentach.
Na przykładzie dyrektywy przewijania pokazano, jak za pomocą funkcji hook `bind`, `inserted`, `update`, `componentUpdated`, `unbind` zaimplementować działania zależne od zdarzeń przewijania i zarejestrować je jako wtyczkę Nuxt, aby były dostępne globalnie.
Szczegółowo opisano rolę każdej funkcji hook i moment ich użycia w kontekście manipulacji DOM i zarządzania listenerami zdarzeń.

Funkcje stosowane powszechnie do DOM w wielu stronach lub komponentach

łatwiej jest utworzyć je jako niestandardowe dyrektywy.

Chcemy stworzyć przykładową dyrektywę przewijania.

- Jest to przydatne w przypadku ładowania danych podczas przewijania na głównym ekranie lub stronie szczegółów, wyświetlania powiadomień toast podczas przewijania itp.

1. Najpierw utwórz plik i zarejestruj go w wtyczce Nuxt.


// nuxt.config.js
export default {
    plugins: [
    '~/plugins/v-scroll.js', // Rejestracja wtyczki
    ],
}

Wtyczki Nuxt config definiują pliki, które są uruchamiane podczas inicjalizacji aplikacji Nuxt, aby włączyć określone funkcje. = Oznacza to, że określoną funkcję można używać globalnie.

2. Zaimplementuj dyrektywę przewijania.


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

// Rejestracja niestandardowej dyrektywy
Vue.directive('scroll', {
    inserted(el, binding) {
        const callback = binding.value.callback; // Przekazana funkcja zwrotna
        const offset = binding.value.offset || 0; // Niestandardowy offset (domyślnie 0)

        // Obsługa zdarzeń przewijania
        const onScroll = () => {
              const scrollPosition = window.scrollY + window.innerHeight;
              const elementPosition = el.offsetTop + offset;

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

    // Rejestracja słuchacza zdarzeń przewijania
    window.addEventListener('scroll', onScroll);

    // Usuwanie słuchacza zdarzeń po odłączeniu elementu
    el._onScroll = onScroll;},
    unbind(el) {
        // Usuwanie słuchacza zdarzeń przewijania
        window.removeEventListener('scroll', el._onScroll);
        delete el._onScroll;
    }
});

Zaimplementuj możliwość przekazania funkcji zwrotnej z komponentu.

3. Teraz użyj v-scroll na stronie.


<template>
    <div v-scroll="{callback: loadMore, offset: 100}">
    </div>
</template>
<script>
export default {
    //...pominięte
    methods: {
        loadMore() {
            // Pobierz więcej danych (fetch, axios itp...)
            
        }
    }

}

</script>

Inne

Istnieje kilka haczyków, których można użyć podczas tworzenia niestandardowych dyrektyw.

1. bind(el, binding, vnode)
Opis: Wywoływane tylko raz, gdy dyrektywa jest po raz pierwszy powiązana z elementem.

Tutaj można wykonać początkową konfigurację powiązanego elementu.

Argumenty

el: Element DOM, do którego powiązano dyrektywę
binding: Obiekt zawierający wartość, wyrażenie i argumenty dyrektywy
vnode: Węzeł wirtualny utworzony przez kompilator Vue


Vue.directive('color', {
    bind(el, binding) {
    // Ustawienie koloru tekstu podczas powiązania dyrektywy
    el.style.color = binding.value;
    }
});

2. inserted(el, binding, vnode)

Opis: Wywoływane, gdy powiązany element jest wstawiany do DOM. Oznacza to, że jest używane, gdy dyrektywa jest faktycznie dodana do DOM.

* W kodzie powiązania zdarzeń przewijania, operacje związane z DOM są wykonywane w momencie wywołania haka inserted.

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

Opis: Wywoływane za każdym razem, gdy zmieniają się atrybuty lub wartości powiązanego elementu.

Jednakże, jest to stan przed zaktualizowaniem komponentów potomnych.

Jest używane, gdy konieczne jest wykonanie operacji DOM po zmianie wartości powiązania.

Argumenty

oldVnode: Poprzednio renderowany węzeł wirtualny

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

Opis: Wywoływane po zaktualizowaniu atrybutów lub wartości powiązanego elementu i wszystkich komponentów potomnych.

Oznacza to, że jest wykonywane w ostatecznym stanie DOM. Oczekuje na zmianę wartości komponentów potomnych, a następnie wykonuje się.

5. unbind(el, binding, vnode)

Opis: Wywoływane, gdy dyrektywa nie jest już stosowana do elementu i element jest niszczony.

W tym momencie usuwane są słuchacze zdarzeń lub wykonywane są zadania sprzątania.

* W przykładzie niestandardowej dyrektywy scroll, słuchacze zdarzeń są czyszczone w momencie unbind.

Temat

#niestandardowa dyrektywa
#nuxt.js

Podsumowanie posta wygenerowane przez AI durumis

Artykuł wyjaśnia, jak wykorzystać niestandardowe dyrektywy w Nuxt.js do zastosowania wspólnych funkcji na stronach lub komponentach.
Na przykładzie dyrektywy przewijania pokazano, jak za pomocą funkcji hook `bind`, `inserted`, `update`, `componentUpdated`, `unbind` zaimplementować działania zależne od zdarzeń przewijania i zarejestrować je jako wtyczkę Nuxt, aby były dostępne globalnie.
Szczegółowo opisano rolę każdej funkcji hook i moment ich użycia w kontekście manipulacji DOM i zarządzania listenerami zdarzeń.