Si e krijoni një direktivë të personalizuar?

Question

Accepted Answer

**Direktiva të personalizuara** ju lejojnë të enkapsuloni **manipulimin e ulët të DOM-it** si atribut i ripërdorshmë `v-*`. Përdorini kur keni nevojë për qasje të drejtpërdrejtë në një element (focus, scroll, biblioteka DOM të palëve të treta) — gjëra që komponentet/props-et nuk e mbulojnë natyralisht. ## Përcaktimi i një direktive lokale ```vue ``` Konvencioni i emërtimit: një ndryshore `vFocus` bëhet direktiva `v-focus`. ## Kancela e direktivave (pasqyrë e ciklitë jetësor të komponentës) ```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 }; ``` ## Përdorimi i vlerës dhe argumentit të lidhjes ```vue ``` Objekti `binding` mban `value` (shprehjen), `arg` (pas dy pikave), `modifiers` (pas pikave) dhe `oldValue`. ## Një shembull praktik: klik-jashtë ```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:

...

``` ## Regjistrimi global ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Pse është e rëndësishme Direktivat e personalizuara janë mjeti i duhur për **sjelljën e ripërdorshme, të ulët të DOM-it** — autofocus, klik-jashtë, ngarkimin e vonuar të imazheve, fjalëkëlimet, integrimin e bibliotekave DOM jo-Vue. Eto që e mbajnë një logjikë DOM imperativ të tillë të enkapsuluar dhe deklarative (`v-click-outside`) në vend që të shpërndahen në kancela të ciklitë jetësor. Dija e kancelave dhe objektit `binding` (value/arg/modifiers), plus pastrimi në `unmounted`, mbulojnë përdorimin e tyre praktik — megjithëse për shumicën e logjikës UI, komponentet janë ende zgjedhja më e mirë.