Aangepaste directives maken in Nuxt.js

Functies die gemeenschappelijk worden toegepast op de DOM in meerdere pagina's of componenten,

zijn handig om als aangepaste directives te maken.

Ik wil een voorbeeld van een scroll-directive maken.

- Handig bij het laden van data tijdens het scrollen op het hoofdscherm of detailpagina's, of het weergeven van een toast tijdens het scrollen.

1. Maak eerst een bestand aan en registreer het in de Nuxt-plugin.

Nuxt config plugins voert de gedefinieerde bestanden uit wanneer de Nuxt-applicatie wordt geïnitialiseerd om bepaalde acties te activeren. = Bepaalde functies kunnen globaal worden gebruikt.

2. Implementeer de scroll-directive.

Implementeer zodat de callback-functie vanuit de component kan worden doorgegeven.

3. Gebruik nu v-scroll op de pagina.

Overig

Er zijn een paar hooks die je kunt gebruiken bij het maken van aangepaste directives.

1. bind(el, binding, vnode)
Beschrijving: Wordt slechts één keer aangeroepen wanneer de directive voor het eerst aan een element wordt gebonden.

Hier kun je de initiële instellingen voor het gebonden element uitvoeren.

Argumenten

el: Het DOM-element waaraan de directive is gebonden
binding: Een object dat de waarde, expressie en argumenten van de directive bevat
vnode: Een virtueel knooppunt dat is aangemaakt door de Vue-compiler

2. inserted(el, binding, vnode)

Beschrijving: Wordt aangeroepen wanneer het gebonden element aan de DOM is toegevoegd. Wordt dus gebruikt wanneer de directive daadwerkelijk aan de DOM is toegevoegd.

* In de code voor het binden van het scroll-event wordt een DOM-gerelateerde bewerking uitgevoerd op het moment van de inserted hook.

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

Beschrijving: Wordt aangeroepen telkens wanneer de eigenschappen of waarde van het gebonden element veranderen.

Maar, het bevindt zich nog in de staat voordat de onderliggende componenten zijn bijgewerkt.

Wordt gebruikt wanneer een DOM-bewerking nodig is wanneer de bindingswaarde verandert.

Argumenten

oldVnode: Het eerder gerenderde virtuele knooppunt

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

Beschrijving: Wordt aangeroepen nadat de eigenschappen of waarde van het gebonden element zijn bijgewerkt en ook alle onderliggende componenten zijn bijgewerkt.

Dat wil zeggen, het wordt uitgevoerd in de uiteindelijke DOM-status. Het wordt uitgevoerd nadat de waarde van de onderliggende component is gewijzigd.

5. unbind(el, binding, vnode)

Beschrijving: Wordt aangeroepen wanneer de directive niet langer op het element wordt toegepast en het element wordt vernietigd.

Op dit moment worden eventlisteners verwijderd of opruimacties uitgevoerd.

* In het voorbeeld van de aangepaste scroll-directive wordt de eventlistener ook opgeruimd op het moment van unbind.