Директивы: общая информация |
Помимо встроенных директив (таких как v-model
и v-show
), Vue позволяет использовать ваши собственные.
При этом важно понимать, что основным механизмом создания повторно используемого кода в Vue всё-таки являются компоненты.
Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские директивы могут очень пригодиться.
Например, чтобы после загрузки страницы в поле ввода сразу устанавливался фокус. Штатными средствами такое сделать не получится, поэтому нужно создать свою директиву (специальный атрибут к DOM-элементу).
Это можно сделать двумя способами:
// Регистрируем глобальную пользовательскую директиву `v-bx-focus` Vue.directive('bx-focus', { // Когда привязанный элемент вставлен в DOM... inserted(element, params) { // Переключаем фокус на элемент element.focus() } })
BX.Vue.component('bx-some-component', { ... directives: { 'bx-focus': { inserted(element, params) { element.focus() } } }, ... })
Теперь в шаблонах можно использовать новый атрибут v-bx-focus
:
<input v-bx-focus>
Подробнее о возможностях директив вы можете прочитать в
документации.
Пользовательские директивы
Помимо встроенных директив (таких как v-model
и v-show
), Vue позволяет использовать ваши собственные. При этом важно понимать, что основным механизмом создания повторно используемого кода во Vue 2.0 всё-таки являются компоненты. Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские директивы могут очень пригодиться.
Подробнее...
Про создание глобальных директив для Bitrix Framework вы можете прочитать в уроке
Создание глобальных директив.
Глобальные директивы располагаются в модуле ui в директории /modules/ui/install/js/ui/vue/directives/
.
Все директивы должна быть в виде расширений СoreJS
в новом формате.
Подробнее...