Руководство
Основы
- Установка
- Введение
- Экземпляр Vue
- Синтаксис шаблонов
- Вычисляемые свойства и слежение
- Работа с классами и стилями
- Условная отрисовка
- Отрисовка списков
- Обработка событий
- Работа с формами
- Основы компонентов
Продвинутые компоненты
- Регистрация компонентов
- Входные параметры
- Пользовательские события
- Слоты
- Динамические и асинхронные компоненты
- Обработка крайних случаев
Переходы и анимации
- Анимирование списков и появления/исчезновения
- Анимирование переходов между состояниями
Переиспользование и композиция
- Примеси
- Пользовательские директивы
- Render-функции и JSX
- Плагины
- Фильтры
Инструментарий
- Однофайловые компоненты
- Тестирование
- Поддержка TypeScript
- Публикация на production
Масштабирование
- Роутинг
- Управление состоянием приложения
- SSR. Отрисовка на стороне сервера
- Безопасность
Продвинутые темы
- Подробно о реактивности
Вопросы миграции
- Миграция с Vue 1.x
- Миграция с Vue Router 0.7.x
- Миграция с Vuex 0.6.x на 1.0
Мета
- Сравнение с другими фреймворками
- Присоединяйтесь к сообществу Vue.js!
- Познакомьтесь с командой
Эта документация для версий v2.x и ранее. Для v3.x, документация на русском здесь.
Пользовательские директивы
Введение
Помимо встроенных директив (таких как v-model
и v-show
), Vue позволяет использовать ваши собственные. При этом важно понимать, что основным механизмом создания повторно используемого кода во Vue 2.0 всё-таки являются компоненты. Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские директивы могут очень пригодиться. В качестве примера реализуем фокус на элементе input:
После загрузки страницы этот элемент получает фокус ввода (примечание: autofocus
не работает на мобильном Safari). Если вы никуда не кликнули с момента открытия этой главы руководства, фокус ввода и сейчас должен быть на этом элементе. Рассмотрим директиву подробнее:
|
Чтобы зарегистрировать директиву локально, можно передать опцию directives
при определении компонента:
|
Теперь в шаблонах можно использовать новый атрибут v-focus
:
|
Хуки
Для жизненного цикла директивы можно указать следующие хуки (все они опциональны):
bind
: вызывается однократно, при первичном связывании директивы с элементом. Здесь можно поместить код инициализации.inserted
: вызывается после вставки связанного элемента внутрь элемента родителя (заметьте, что сам родитель может на этот момент и не принадлежать ещё основному дереву элементов).update
: вызывается после обновления VNode компонента-контейнера, но, возможно, до обновления дочерних элементов. Значение директивы к этому моменту может измениться, а может и нет. Сравнивая текущее и прошлое значения, вы можете избежать избыточных операций (см. ниже об аргументах хуков).
Подробнее мы обсудим VNodes позднее, когда будем разбирать Render-функции.
componentUpdated
: вызывается после обновления как VNode компонента-контейнера, так и VNode его потомков.unbind
: вызывается однократно, при отвязывании директивы от элемента.
В следующем разделе мы рассмотрим аргументы, передаваемые в эти хуки (а именно: el
, binding
, vnode
и oldVnode
).
Аргументы хуков
В хуки передаются следующие параметры:
el
: Элемент, к которому привязана директива. Можно использовать для прямых манипуляций с DOM.binding
: Объект, содержащий следующие свойства:name
: Название директивы, без указания префиксаv-
.value
: Значение, переданное в директиву. Например, дляv-my-directive="1 + 1"
значением будет2
.oldValue
: Предыдущее переданное в директиву значение. Доступно только для хуковupdate
иcomponentUpdated
, и передаётся независимо от того, произошло ли в действительности его изменение.expression
: Выражение-строка, переданное в директиву. Например, дляv-my-directive="1 + 1"
это будет"1 + 1"
.arg
: Аргумент, переданный в директиву, в случае его наличия. Например, дляv-my-directive:foo
это будет"foo"
.modifiers
: Объект, содержащий модификаторы, если они есть. Например, дляv-my-directive.foo.bar
, объектом модификаторов будет{ foo: true, bar: true }
.
vnode
: Виртуальный элемент, созданный компилятором Vue. См. VNode API для подробностей.oldVnode
: Предыдущий виртуальный элемент, доступный только для хуковupdate
иcomponentUpdated
.
Все аргументы, кроме el
, следует понимать как только для чтения и никогда не изменять их. В случае необходимости передать информацию между хуками рекомендуем воспользоваться dataset.
Пример пользовательской директивы, использующей некоторые из описанных возможностей:
|
|
Динамические аргументы директивы
Аргументы директивы могут быть динамическими. Например, для v-mydirective:[argument]="value"
, argument
может обновляться в зависимости от свойства данных экземпляра компонента! Это позволит сделать пользовательские директивы более гибкими при использовании в приложении.
Допустим, необходимо создать собственную директиву, которая позволит установить элементы на странице с помощью фиксированного позиционирования. Можно создать пользовательскую директиву, где значение определяет вертикальное положение в пикселях, например так:
|
|
Это закрепит элемент в 200px от начала страницы. Но что если возникнет случай, когда необходимо закрепить элемент слева, а не сверху? Для этого пригодится динамический аргумент директивы, который можно определить для каждого экземпляра компонента:
|
|
Результат:
Теперь пользовательская директива достаточно гибкая для использования в нескольких различных случаях.
Сокращённая запись
Часто нам может потребоваться одинаковое поведение на bind
и update
, а остальные хуки не нужны. В таком случае можно использовать сокращённую запись:
|
Передача объекта данных в директиву
В случае, если директива должна принимать несколько параметров, можно указать объект JavaScript — годится любое валидное выражение, помните?
|
|