Как создать пользовательскую директиву?

Question

Accepted Answer

**Пользовательские директивы** позволяют инкапсулировать **манипуляцию DOM на низком уровне** как повторно используемый атрибут `v-*`. Используйте их, когда вам нужен прямой доступ к элементу (фокус, прокрутка, библиотеки DOM третьих сторон) — вещи, которые компоненты/пропсы естественным образом не охватывают. ## Определение локальной директивы ```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 низкого уровня** — автофокус, click-outside, ленивая загрузка изображений, подсказки, интеграция библиотек DOM, не относящихся к Vue. Они сохраняют такую императивную логику DOM инкапсулированной и декларативной (`v-click-outside`) вместо того, чтобы быть разбросанной по хукам жизненного цикла. Знание хуков и объекта `binding` (value/arg/modifiers), плюс очистка в `unmounted`, охватывает практическое использование — хотя для большей части логики UI компоненты по-прежнему остаются лучшим выбором.