Conas a ghníonn tú treoir dhíobhálach?

Question

Accepted Answer

Ligeann **treoracha díobhálach** duit **ionramháil DOM íseal-leibhéal** a ghreamúchán mar fhréamh `v-*` athúsáidte. Úsáid iad nuair is gá duit rochtain dhíreach ar eilimint (focus, scroll, leabharlanna DOM tríú páirtí) — rudaí nach dtugann comhpháirteanna/props go nádúrtha. ## Treoir áitiúil a shainiú ```vue ``` An choinbhinsiún ainmnithe: bíonn athróg `vFocus` ina threoir `v-focus`. ## Hooks treorach (scáthan saolré an chomhpháirt) ```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 }; ``` ## An luach ceangailte agus an argóint a úsáid ```vue ``` Iompraíonn an réad `binding` `value` (an slonn), `arg` (tar éis an cholúin), `modifiers` (tar éis na poncanna), agus `oldValue`. ## Sampla praiticiúil: 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:

...

``` ## Clárúchán domhanda ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Cén fáth a bhfuil sé tábhachtach Is é an uirlis cheart do **dhómhainiú athúsáidte, DOM íseal-leibhéal** treoracha díobhálach — autofocus, click-outside, lazy-loading íomhánna, tooltips, leabharlanna DOM nach Vue a bhaint amach. Coimeádann siad an loighic DOM iomaitheoirí seo greanta agus deicéadach (`v-click-outside`) seachas scaptha i bhfeidhmeanna saolré. A bheith ar an eolas faoi na hooks agus an réad `binding` (value/arg/modifiers), móide a ghlantadh in `unmounted`, a chlúdaíonn a n-úsáid phraiticiúil — go dtí gur rogha níos fearr iad comhpháirteanna fós do bhformhór na loighice UI.