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

Анна Кокина

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

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

1

2

3

4

5

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

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

Перед началом работы рекомендуем ознакомиться с фреймворком на сайте разработчика. В этом руководстве мы предполагаем, что вы уже знакомы с HTML, CSS и JavaScript на базовом уровне. Если же вы во фронтенд-разработке совсем новичок, начинать сразу с изучения фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.

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

Содержание урока:

• Подключение и запуск
• Функции, из которых состоит объект
• Создание своего первого приложения
• Использование Vue в уже существующем проекте
• Управляющий скрипт

Подключение и запуск

Для начала работы подключите Bitrix CoreJS расширение ui.vue Доступно с версии ui 18.5.1 в вашем компоненте или на php-странице с помощью \Bitrix\Main\UI\Extension::load("ui.vue");

Для работы с Vue после подключения библиотеки в глобальной области видимости будет доступен объект BX.Vue.

По умолчанию, Vue запускается в режиме production без подсказок. Чтобы на вашей установке работали все подсказки, необходимо в /bitrix/php_interface/init.php добавить следующую константу:

define('VUEJS_DEBUG', true);

Функции, из которых состоит объект:

• Создание экземпляра Vue (в терминах Vue это называется приложение)

  BX.Vue.create(params) - аналог оригинального вызова new Vue(params) (документация)

• Регистрация компонента

  BX.Vue.component(id, params) - аналог оригинального вызова Vue.component(id, params) (документация)

• Проверка регистрации компонента

  BX.Vue.isComponent(id) - возвращает true в случае, если такой компонент зарегистрирован.

• Регистрация глобальной директивы

  BX.Vue.directive(id, params) - аналог оригинального вызова Vue.directive(id, params) (документация)

• Фильтрация локализаций для вставки в шаблон

  BX.Vue.getFilteredPhrases(phrasePrefix) (документация)

• Отправка события в Единую шину событий (Event Bus)

  BX.Vue.event.$emit(...) (документация)

  BX.Vue.event.$on(...) (документация)

• Клонирование компонента

  BX.Vue.cloneComponent(id, sourceId, mutations) (документация)

• Метод для кастомизации компонента партнером

  BX.Vue.mutateComponent(id, mutations) (документация)

Создание своего первого приложения

Нужно разместить dom-элемент на странице, где в будущем будет отрисован Vue-компонент.

В самом простом виде это выглядит так:

	<div id="vue-application"></div>
	<script>
		BX.Vue.component('bx-component', {
		     template: '<div>Мое первое Vue приложение</div>'
		});

		BX.Vue.create({
			el: '#vue-application',
			template: '<bx-component/>'
		});
	</script>

Использование Vue в уже существующем проекте

Компонент во Vue В рамках Vue.js используется понятие Компонент. Компоненты Vue.js — это переиспользуемые экземпляры Vue со своим именем.

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

Хоть компоненты и могут иметь логику, взаимодействие между ними и взаимодействие с сервером лучше выносить за их пределы.

Рассмотрим на примере поля ввода сообщения (допустим, комментарий к задаче). Такой компонент должен содержать в себе логику по работе именно поля ввода текста (уметь выделять текст и т.д.), но логику сохранения результатов в базу данных он не должен реализовывать. На это есть множество причин, одна из них - этот компонент можно переиспользовать в разных местах. Поэтому наполнять его лишними знаниями не стоит, так как это усложнит его сопровождение и использование.

Лучшим решением будет внешний управляющий скрипт. Он с помощью событий Компоненты в рамках Vue - автономные структуры, у которых логика и данные находятся в предсказуемых местах. Зачастую даже при беглом взгляде можно сразу понять, какие используются входные параметры (props) и какие используются внутренние переменные (data).

Чтобы компоненты могли взаимодействовать друг с другом, в Vue существует возможность распространять события с помощью .$emit('eventName', eventParams) и подписываться (слушать) через .$on('eventName', this.eventCallback);.

Подробнее... будет отлавливать действие пользователя и уже самостоятельно взаимодействовать с сервером.

Управляющий скрипт

Именно в нем вызывается BX.Vue.create и заставляет Vue отрисовать шаблон в нужном месте. Это выглядит примерно так:

	class TaskManager
	{
		attachTemplate()
		{
			this.rootNode.innerHTML = '';
			this.rootNode.appendChild(document.createElement('div'));
			
			let restClient = BX.rest;
			let pullClient = BX.PULL;
			
			this.templateEngine = BX.Vue.create({
				el: this.rootNode.firstChild,
				template: '<bx-component/>',
				beforeCreate() 
				{
					this.$bitrixRestClient = restClient;
					this.$bitrixPullClient = pullClient;
				},
				destroyed()
				{
					this.$bitrixRestClient = null;
					this.$bitrixPullClient = null;
				}
			});
		}
		
		detachTemplate()
		{
			if (!this.templateEngine)
			{
				this.templateEngine.$destroy();
			}

			return true;
		}
	}

В этой конструкции обратите внимание на следующие элементы:

В el лучше указывать не корневой элемент, куда требуется вставить Vue, а создать новый пустой элемент (пустую ноду). Это позволит применять анимацию плавного показа и скрытия (если такие действия есть в шаблоне).

В beforeCreate можно объявить следующие переменные:

• this.$bitrixRestClient = restClient; - для предоставления компонентам возможности отправить rest-запрос;
• this.$bitrixPullClient = pullClient - для доступа к Push&Pull клиенту.

При использовании переменных внутри компонентов вместо this указывается this.$root, и обязательно нужно проверять их наличие перед вызовом.

Если переменные объявлены при создании, необходимо удалить в методе destroyed.

Все взаимодействия управляющего скрипта и шаблона должны проходить через событийную модель Vue Компоненты в рамках Vue - автономные структуры, у которых логика и данные находятся в предсказуемых местах. Зачастую даже при беглом взгляде можно сразу понять, какие используются входные параметры (props) и какие используются внутренние переменные (data).

Чтобы компоненты могли взаимодействовать друг с другом, в Vue существует возможность распространять события с помощью .$emit('eventName', eventParams) и подписываться (слушать) через .$on('eventName', this.eventCallback);.

Подробнее... (глобальное событие или событие приложения).

Так отправляется событие внутрь приложения:

this.templateEngine.$emit('onComponentAction', {name: 'ComponentName'});
BX.Vue.event.$emit('onComponentAction', {name: 'ComponentName'});

Так можно подписаться на эту команду внутри приложения:

this.$root.$on('onComponentAction', this.onComponentAction);
BX.Vue.event.$on('onComponentAction', this.onComponentAction);

Если приложение не предполагает пользовательского ввода, можно управлять им с помощью Внешнего хранилища данных Vuex. Vuex - это паттерн управления состоянием и библиотека для приложений на Vue.js. Он служит центральным хранилищем данных для всех компонентов приложения и обеспечивает предсказуемость изменения данных при помощи определённых правил.

Кроме того, Vuex интегрируется с официальным расширением инструментов разработчика Vue, предоставляя "из коробки" такие возможности, как "машину времени" при отладке и экспорт/импорт слепков состояния данных.

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