Kif toħloq direttiva personalizzata?

Question

Accepted Answer

**Direttivi personalizzati** jagħtuk il-possibbiltà li tenkapsulizza l-**manipulazzjoni DOM ta' livell baxx** bħala attribut `v-*` riutilizzabbli. Użahom meta għandek bżonn aċċess dirett għal element (focus, scroll, libreriji DOM ta' parti terza) — affarijiet li komponenti/props naturalment ma jkopprux. ## Tidentifikazzjoni ta' direttiva lokali ```vue ``` Il-konvenzjoni tal-isem: varjabbli `vFocus` issir id-direttiva `v-focus`. ## Hooks tad-direttiva (rifless tal-ċiklu tal-ħajja tal-komponenti) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## L-użu tal-valur tal-binding u l-argument ```vue ``` L-oġġett `binding` ġorr `value` (l-espressjoni), `arg` (wara l-kolonja), `modifiers` (wara l-punti), u `oldValue`. ## Eżempju prattiku: click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## Reġistrazzjoni globali ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Għaliex Hu Importanti Id-direttivi personalizzati huma l-għodda t-tajba għall-**imġieba DOM riutilizzabbli u ta' livell baxx** — autofocus, click-outside, lazy-loading tal-immaġini, tooltips, l-integrazzjoni ta' libreriji DOM li mhux Vue. Huma jżommu tali loġika DOM imperattiva enkapsulata u deklarattiva (`v-click-outside`) minflok mifruxa f'hooks tal-ċiklu tal-ħajja. Il-għarfien tal-hooks u l-oġġett `binding` (value/arg/modifiers), flimkien mal-immundizia f'`unmounted`, jkopri l-użu prattiku tagħhom — għalkemm għall-aktar loġika UI, komponenti huma għadu l-għażla aħjar.