Unaanzaje directive ya kawaida?

Question

Accepted Answer

**Zana za kawaida** zinakuruhusu kukamatia **upotezaji wa DOM wa kiwango cha chini** kama sifa `v-*` inayotumiwa tena. Zitumie wakati unahitaji kufikia moja kwa moja kipengee (focus, scroll, maktaba za DOM za wahusika wengine) — mambo ambayo vijenzi/props si kawaida huvuta. ## Kufafanua zana ya ndani ```vue ``` Mkutano wa kuandika jina: kutofautiana `vFocus` inakuwa zana `v-focus`. ## Matatizo ya zana (kioo cha mzunguko wa maisha ya vijenzi) ```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 }; ``` ## Kutumia thamani ya kuunganisha na hoja ```vue ``` Objekti `binding` inabeba `value` (usemi), `arg` (baada ya koloni), `modifiers` (baada ya nukta) na `oldValue`. ## Mfano wa vitendo: kuzindua nje ```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:

...

``` ## Usajili wa ulimwengu ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Kwa nini inakusudiwa Zana za kawaida ni zana sahihi kwa **tabia inayotumiwa tena, ya kiwango cha chini cha DOM** — autofocus, kuzindua nje, upakaji wa haraka wa picha, vidokezo, kuunganisha maktaba za DOM za uhalifu. Zinabaki mantiki hii ya DOM ya amri kukamatia na kutangaza (`v-click-outside`) badala ya kusambazwa katika matatizo ya mzunguko wa maisha. Kujua matatizo na `binding` object (value/arg/modifiers), pamoja na kusafisha katika `unmounted`, hufunika matumizi yao ya vitendo — ingawa kwa mantiki nyingi za UI, vijenzi bado ni chaguo bora.