0Pricing
Vue Academy · Урок

Написание пользовательских директив

app.directive(), хуки mounted/updated/unmounted, аргументы и модификаторы директив

«Написание пользовательских директив» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Когда компонентов недостаточно

В Vue повторное использование кода чаще всего реализуется с помощью компонентов и компонуемых функций. Однако иногда логика работает непосредственно с DOM — например, автоматически устанавливает фокус в поле ввода, интегрирует библиотеку, не связанную с Vue, или измеряет элемент. Пользовательские директивы созданы именно для таких задач.

Минимальная директива

Зарегистрируйте директиву в приложении с помощью app.directive. Хук монтирования получает элемент, поэтому эта директива устанавливает фокус в поле ввода, когда оно появляется.

const app = createApp(App)
app.directive('focus', {
  mounted(el) { el.focus() }
})

Использование директивы

Применяйте её в шаблоне с префиксом v- и зарегистрированным именем.

<template>
  <input v-focus />
</template>

Локальные директивы в script setup

Внутри <script setup> любая переменная верхнего уровня, начинающаяся с v и записанная в camelCase, становится доступной директивой. Назовите её vFocus и используйте как v-focus.

<script setup>
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

Объект привязки

Каждый хук получает объект binding вторым аргументом. В нём содержатся значение директивы, аргумент и модификаторы, переданные в шаблоне.

app.directive('demo', {
  mounted(el, binding) {
    console.log(binding.value, binding.arg, binding.modifiers)
  }
})

Передача значения

Выражение после знака равенства становится значением binding.value. Здесь передаётся цвет, который применяется к элементу.

<!-- template -->
<p v-color="'red'">Hello</p>

<!-- directive -->
app.directive('color', {
  mounted(el, binding) { el.style.color = binding.value }
})

Передача аргумента

Часть после двоеточия становится значением binding.arg. Это позволяет одной директиве вести себя по-разному в зависимости от метки.

<!-- v-pin:top means binding.arg === 'top' -->
<div v-pin:top="20"></div>

Использование модификаторов

Модификаторы указываются после точек и поступают в binding.modifiers в виде карты логических значений. Используйте их для настройки поведения.

<!-- v-pin.fixed -> binding.modifiers.fixed === true -->
<div v-pin.fixed="10"></div>

Хуки жизненного цикла директивы

У директив есть хуки, повторяющие жизненный цикл компонента: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount и unmounted.

Реакция на обновления

Хук updated запускается после повторной отрисовки элемента. Сравнивайте binding.value с binding.oldValue, чтобы реагировать только на реальные изменения, а очистку выполняйте в unmounted.

app.directive('color', {
  mounted(el, binding) { el.style.color = binding.value },
  updated(el, binding) {
    if (binding.value !== binding.oldValue) el.style.color = binding.value
  }
})

Директивы и компоненты

Предпочитайте компоненты для всего, что связано со структурой или состоянием. Используйте директивы только тогда, когда нужен низкоуровневый прямой доступ к DOM, который не подходит для компонента, например для управления фокусом или работы со сторонними виджетами DOM.

Быстрая проверка

Проверьте свои знания о пользовательских директивах.

Итоги

Вы научились создавать пользовательские директивы:

  • Регистрируйте их глобально с помощью app.directive или локально как vName в script setup.
  • binding.value, binding.arg и binding.modifiers передают данные.
  • Хуки жизненного цикла: создание, beforeMount, монтирование, beforeUpdate, обновление, beforeUnmount, размонтирование.
  • Используйте директивы для низкоуровневой работы с DOM, а в остальных случаях предпочитайте компоненты.

Часто задаваемые вопросы

Урок «Написание пользовательских директив» бесплатный?

Да — полный текст урока «Написание пользовательских директив» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Написание пользовательских директив»?

app.directive(), хуки mounted/updated/unmounted, аргументы и модификаторы директив Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Написание пользовательских директив»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. v-model: внутреннее устройство двусторонней привязки
  2. Модификаторы событий v-on
  3. Динамические и множественные привязки v-bind
  4. Написание пользовательских директив
← Назад к Vue Academy