Dit artikel legt uit hoe je aangepaste directives in Nuxt.js gebruikt om algemene functionaliteit toe te passen op pagina's of componenten.
Met een scroll directive als voorbeeld, wordt getoond hoe je met de hook-functies `bind`, `inserted`, `update`, `componentUpdated`, `unbind` acties implementeert op basis van scroll-events, en hoe je deze registreert in een Nuxt plugin voor globaal gebruik.
De rol en het gebruik van elke hook voor DOM manipulatie en event listener management wordt gedetailleerd beschreven.
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.
Implementeer zodat de callback-functie vanuit de component kan worden doorgegeven.
3. Gebruik nu v-scroll op de pagina.
<template><divv-scroll="{callback: loadMore, offset: 100}"></div></template><script>exportdefault{//...weglatenmethods:{loadMore(){// Meer data ophalen (fetch, axios etc...)}}}</script>
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
Vue.directive('color',{bind(el, binding){// Stel de tekstkleur in wanneer de directive wordt gebonden el.style.color= binding.value;}});
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.