363  /  396

Директивы

Просмотров: 1040 (Статистика ведётся с 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 в новом формате.

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



0
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии