Дата последнего изменения: 12.08.2020
Перед началом работы рекомендуем ознакомиться с фреймворком на
сайте разработчика.
В этом руководстве мы предполагаем, что вы уже знакомы с HTML, CSS и JavaScript на базовом уровне. Если же вы во фронтенд-разработке совсем новичок, начинать сразу с изучения фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.
Подробнее...
Для начала работы подключите 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);
import {Vue} from 'ui.vue'
. После этого
можно обращаться к Vue без префикса BX.
Функции, из которых состоит объект:
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)
(документация)
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>
el
может быть как текстовым атрибутом, так и ссылкой на DOM-элемент, если он хранится в переменной.
template
всегда указывайте ваш корневой компонент, чтобы его можно было переиспользовать в другом месте или модицифировать партнерам.
Использование 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, предоставляя "из коробки" такие возможности, как "машину времени" при отладке и экспорт/импорт слепков состояния данных.
Подробнее...