როგორ შეგიძლიათ შექმნათ მორგებული დირექტივა?

Question

Accepted Answer

**მორგებული დირექტივები** საშუალებას გაძლევთ ინკაპსულირდეს **DOM-ის მუშაობა დაბალი დონეზე** როგორც გამოყენებადი `v-*` ატრიბუტი. გამოიყენეთ ისინი, როდესაც გჭირდებათ პირდაპირი წვდომა ელემენტზე (focus, scroll, მესამე მხარის DOM ბიბლიოთეკები) — რამ, რის კეთებასაც კომპონენტები/props-ები ბუნებრივად არ აკეთებენ. ## ლოკალური დირექტივის განსაზღვრა ```vue ``` სახელების კონვენცია: ცვლადი `vFocus` ხდება დირექტივა `v-focus`. ## დირექტივის ჰუკები (კომპონენტის ცხოვრების ციკლის ანალოგი) ```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 }; ``` ## შედაბინდის მნიშვნელობის და არგუმენტის გამოყენება ```vue ``` ობიექტი `binding` შეიცავს `value` (გამოხატულება), `arg` (ორწერტილის შემდეგ), `modifiers` (წერტილის შემდეგ), და `oldValue`. ## პრაქტიკული მაგალითი: 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:

...

``` ## გლობალური რეგისტრაცია ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## რატომ აქვს მნიშვნელობა მორგებული დირექტივები სწორი ინსტრუმენტია **გამოყენებადი, დაბალი დონის DOM ქცევისთვის** — autofocus, click-outside, სურათების ინერტული ჩატვირთვა, tooltip-ები, Vue-ს გარეშე DOM ბიბლიოთეკების ინტეგრაცია. ისინი ამ იმპერატიული DOM ლოგიკას ინკაპსულირებული და დეკლარაციული (`v-click-outside`) ინახავენ, ვიდრე ცხოვრების ციკლის ჰუკებში გაფანტული იყო. ჰუკები და `binding` ობიექტის ცოდნა (value/arg/modifiers), პლუს გაწმენდა `unmounted`-ში, მათი პრაქტიკული გამოყენების დაფარვა — მიუხედავად იმისა, რომ უმეტესი UI ლოგიკისთვის, კომპონენტები მაინც უკეთეს არჩევანია.