A bejegyzés durumis AI által generált összefoglalója
Bemutatja, hogyan lehet egyéni direktívákat használni Nuxt.js-ben az oldalakon és komponenseken a közös funkciók alkalmazásához.
Görgetési direktíva példáján keresztül megmutatjuk, hogyan lehet a `bind`, `inserted`, `update`, `componentUpdated`, `unbind` kampófüggvények segítségével implementálni a görgetési eseményekhez kapcsolódó műveleteket, és hogyan lehet azokat globálisan használhatóvá tenni a Nuxt plugin regisztrációjával.
Részletesen ismerteti a DOM manipulációhoz és az eseményfigyelők kezeléséhez szükséges kampófüggvények szerepét és alkalmazási idejét.
Hasznos, ha a több oldalon vagy komponensen közösen alkalmazott DOM-funkciókat
egyéni direktívákká alakítjuk.
Egy görgetési direktíva példányát szeretnénk létrehozni.
- Hasznos lehet a főképernyőn vagy a részletes oldalakon, például adatbetöltés görgetéskor, vagy toast üzenet megjelenítése görgetéskor.
1. Először létrehozzuk a fájlt, és regisztráljuk a Nuxt pluginben.
A Nuxt config pluginjei a definiált fájlokat a Nuxt alkalmazás inicializálása során futtatják, és aktiválják a specifikus műveleteket. = Specifikus funkciók globálisan használhatók.
Lehetővé tesszük a visszahívási függvény átadását a komponensekből.
3. Most már használhatjuk a v-scroll-t az oldalakon.
<template><divv-scroll="{callback: loadMore, offset: 100}"></div></template><script>exportdefault{//...kihagyásmethods:{loadMore(){// Több adat lekérdezése (fetch, axios stb...)}}}</script>
Egyéb
Néhány hasznos kampó létezik egyéni direktívák létrehozásakor.
1. bind(el, binding, vnode) Leírás: Csak egyszer hívódik meg, amikor a direktíva először kötődik az elemhez.
Itt állíthatjuk be a kötött elem kezdeti beállításait.
Argumentumok
el: A DOM elem, amelyhez a direktíva kötődik binding: Objektum, amely tartalmazza a direktíva értékét, kifejezését és argumentumait vnode: A Vue fordító által létrehozott virtuális csomópont
Vue.directive('color',{bind(el, binding){// A direktíva kötődésekor állítsuk be a szöveg színét el.style.color= binding.value;}});
2. inserted(el, binding, vnode)
Leírás: Akkor hívódik meg, amikor a kötött elem be lett illesztve a DOM-ba. Azaz, amikor a direktíva ténylegesen hozzá lett adva a DOM-hoz.
* A görgetési eseménykötés kódjában a DOM-mal kapcsolatos műveleteket az inserted kampóban végezzük.
3. update(el, binding, vnode, oldVnode)
Leírás: Minden alkalommal meghívódik, amikor a kötött elem attribútuma vagy értéke megváltozik.
De a gyermek komponensek még nem lettek frissítve.
Akkor használjuk, ha a DOM-műveletekre van szükség a kötött érték megváltozásakor.
Argumentumok
oldVnode: Az előzőleg renderelt virtuális csomópont
4. componentUpdated(el, binding, vnode, oldVnode)
Leírás: Akkor hívódik meg, amikor a kötött elem attribútuma vagy értéke frissítve lett, és a gyermek komponensek is frissültek.
Azaz, a végső DOM állapotban történik. Megvárja, hogy a gyermek komponensek értékei megváltozzanak, majd végrehajtja a műveletet.
5. unbind(el, binding, vnode)
Leírás: Akkor hívódik meg, amikor a direktíva már nem érvényes az elemről, és az elem megsemmisül.
Ekkor távolítsuk el az eseményfigyelőket, vagy végezzünk el takarítási műveleteket.
* A scroll egyéni példában is eltávolítjuk az eseményfigyelőt az unbind kampóban.