Просмотров: 698 (Статистика ведётся с 06.02.2017)

Анна Кокина

Сложность урока:

4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.

1

2

3

4

5

Недоступно в редакциях:

Ограничений нет

Помимо встроенных директив (таких как v-model и v-show), Vue позволяет использовать ваши собственные.

При этом важно понимать, что основным механизмом создания повторно используемого кода в Vue всё-таки являются компоненты.

Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские директивы могут очень пригодиться.

Например, чтобы после загрузки страницы в поле ввода сразу устанавливался фокус. Штатными средствами такое сделать не получится, поэтому нужно создать свою директиву (специальный атрибут к DOM-элементу).

Это можно сделать двумя способами:

• зарегистрировать глобальную директиву (для всех компонентов vue):

  // Регистрируем глобальную пользовательскую директиву `v-bx-focus`
  Vue.directive('bx-focus', {
    // Когда привязанный элемент вставлен в DOM...
    inserted(element, params) 
    {
  	// Переключаем фокус на элемент
  	element.focus()
    }
  })
  

• зарегистрировать локально (доступную только в вашем компоненте). Для этого нужно передать опцию directives при определении компонента:

  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 в новом формате.

Подробнее...