Özel bir directive nasıl oluşturursunuz?

Question

Accepted Answer

**Özel direktifler**, **düşük seviyeli DOM manipülasyonu** kapsüllemenize ve yeniden kullanılabilir bir `v-*` özniteliği olarak kullanmanıza olanak tanır. Bir elemana doğrudan erişime ihtiyaç duyduğunuzda (odaklanma, kaydırma, üçüncü taraf DOM kütüphaneleri) — bileşenlerin/props'ların doğal olarak kapsamadığı şeyler için kullanın. ## Yerel bir direktif tanımlama ```vue ``` Adlandırma kuralı: `vFocus` değişkeni `v-focus` direktifine dönüşür. ## Direktif hooks'ları (bileşen yaşam döngüsünü yansıt) ```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 }; ``` ## Bağlama değeri ve argümanı kullanma ```vue ``` `binding` nesnesi `value` (ifade), `arg` (iki nokta üstünden sonra), `modifiers` (noktalardan sonra) ve `oldValue` taşır. ## Pratik bir örnek: 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:

...

``` ## Global kayıt ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Neden önemli Özel direktifler **yeniden kullanılabilir, düşük seviyeli DOM davranışı** için doğru araçtır — otomatik odaklanma, click-outside, görselleri tembel yükleme, araç ipuçları, Vue olmayan DOM kütüphanelerini entegre etme. Böyle zorunlu DOM mantığını kapsüllü ve bildirimsel (`v-click-outside`) olarak tutarlar, yaşam döngüsü hooks'larına dağılmış halde tutmak yerine. Hooks'ları ve `binding` nesnesini (value/arg/modifiers) bilmek, artı `unmounted` içinde temizlik yapmak, pratik kullanımlarını kapsar — ancak çoğu UI mantığı için, bileşenler hâlâ daha iyi bir seçimdir.