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

Устанавливается VueJS очень просто. Для разработчика разобраться в нем и начать создавать пользовательские веб-интерфейсы - это всего лишь вопрос небольшого времени. Создателем VueJS является Эван Ю (Evan You), бывший сотрудник Google. Релиз первой версии VueJS состоялся в феврале 2014.

Функции

Ниже представлены функции VueJS.

- Virtual DOM

VueJS использует Virtual DOM, как и такие известные фреймворки, как React, Ember и т.д. Изменения не вносятся в DOM, а создаётся копия DOM, выступающая в форме JavaScript структуры данных. Если нужно внести изменения, то они вносятся в JavaScript структуры данных, и последние сравниваются с исходной структурой данных. Потом окончательные изменения вносятся в реальный DOM, и их пользователь уже сможет наблюдать. Такой подход хорош в плане оптимизации, он не требует задействования большого количества ресурсов и изменения будут происходить гораздо быстрее.

- Привязка данных

Функция привязки данных помогает управлять значениями или присваивать их HTML-атрибутам, изменять стили, присваивать классы с помощью привязывающей директивы VueJS v-bind.

- Компоненты

Компоненты - это очень важная функция VueJS, помогающая создать пользовательскме элементы, которые можно повторно использовать в HTML.

- Управление событиями

v-on - это атрибут, который добавляется к элементам DOM, чтобы прослушивать события в VueJS.

- Анимация/Переходы

VueJS обеспечивает множество способов применять переходы к HTML-элементам, когда их добавляют / обновляют или убирают из DOM. VueJS имеет встроенный компонент переходов, который нужно обернуть вокруг элемента для создания эффекта перехода. Можно также легко добавить сторонние библиотеки анимации.

- Вычисляемые свойства

Это следующая важная функция VueJS. Она помогает прослушивать изменения, внесённые в элементы UI, и выполняет необходимые вычисления. Для этого нам не нужно писать дополнительный код.

- Шаблоны

VueJS представляет шаблоны, основанные на HTML, которые связывают DOM с данными экземпляра Vue. Vue компилирует шаблоны в функции Render виртуального DOM. Вы можете использовать шаблон функций Render, для этого нужно заменить шаблон render-функцией.

- Директивы

VueJS имеет такие встроенные директивы как v-if, v-else, v-show, v-on, v-bind и v-model, которые используются для выполнения различных действий во фронт-енд.

- Наблюдатели

Наблюдатели применяются к изменяемым данным. Например, для вводимых элементов. В данном случае нам не нужно добавлять дополнительные события. Наблюдатель следит за изменениями данных, этим самым делая код проще и быстрее.

- Маршрутизация

Навигация между страницами выполняется с помощью vue-router.

- Компактность

VueJS скрипт очень компактный, что обеспечивает высокую производительность.

- Vue-CLI

VueJS может быть установлен из командной строки с помощью интерфейса командной строки vue-cli. Он помогает быстро создавать и компилировать проект с помощью vue-cli.