Vue.js

Vue.js — это прогрессивный фреймворк для разработки пользовательских интерфейсов и одностраничных веб-приложений на языке JavaScript. Он решает задачи уровня представления (view) и упрощает работу с библиотеками. Vue.js можно внедрять постепенно, этим он отличается от других фреймворков.

Фреймворк применяют Alibaba, Twitter, Facebook^*, Baidu, EuroNews, Xiaomi, Sina Weibo и т.д. Он входит в ядро фреймворков Laravel и PageKit. Новые версии продукта появляются несколько раз за год. Каждая имеет название, взятое из аниме, манги и научной фантастики. Последняя на данный момент версия 3.2 представлена в 2021 году и названа The Quintessential Quintuplets. На данный момент это один из наиболее перспективных фреймворков: он гибкий, быстро работает и активно развивается.

Где используется Vue.js

Фреймворк Vue.js применяется при разработке:

• быстрых веб-сайтов и приложений, блогов небольшого размера;
• сайтов с высокой нагрузкой — интернет-магазинов, информационных порталов;
• одностраничных (SPA) приложений — социальных сетей, микроблогов-сервисов, CMS и т.д.;
• адаптивных интерфейсов;
• разделов личных кабинетов и пользовательских страниц;
• интерфейсов авторизации, онлайн-чатов, форм заявки и других функциональных блоков.

Особенности Vue.js

Реактивность

Vue.js — это реактивный MVC-фреймворк. Представление (view) изменяется по мере изменения модели.

Прогрессивность

Ядро Vue.js идеально подходит для внедрения в существующий проект. Так, сайт готового продукта может продолжать работать, например на jQuery (ранее используемой библиотеке), но часть модулей постепенно будет переписываться на Vue до полноценного перехода.

Простота

Начать работать с фреймворком можно без базовых знаний в веб-разработке. Низкий порог вхождения — причина популярности у начинающих разработчиков.

Небольшой вес

Фреймворк занимает около 20 кБ, поэтому реализованные на нем проекты быстрее загружаются и лучше ранжируются поисковыми роботами.

Быстрая разработка

Шаблоны, множество документации и инструкций, широкое сообщество энтузиастов позволяют решить любую проблему, возникающую при создании проектов на Vue.js.

Доступность

Vue.js распространяется по лицензии MIT. Его можно свободно использовать и в коммерческих, и в личных целях. 

Как устроен Vue.js

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

Шаблоны. Это валидный HTML-код, привязывающий визуализированную DOM (объектную модель документа) к данным базы Vue.js. Фреймворк отображает компоненты в памяти DOM перед обновлением браузера. Подключая систему реактивности, Vue.js определяет наименьшее число компонентов для повторного отображения и уменьшает количество действий с объектной моделью при изменении состояния приложения.

Переходы. Эти инструменты реализуют анимационные эффекты для отрисованных, обновленных или удаленных из DOM-элементов. Они включают:

• автоматическое применение классов для CSS-переходов и анимации;
• подключение библиотек для CSS-анимации из сторонних источников, таких как Animate.css;
• изменения DOM с помощью JavaScript;
• подключение JS-библиотек из сторонних источников для анимации (например Velocity.js).

Директивы. Это специальные атрибуты, используемые внутри HTML-шаблона компонента Vue для взаимодействия с HTML-тегами и другими компонентами. Как правило, они прописываются с буквой v в начале, после которой через дефис следует название. Примеры основных директив:

• v-show — обеспечивает отрисовку элемента в соответствии с переданным значением (true демонстрирует элемент, false — скрывает);
• v-if — также отображает элемент, но в, отличие от предыдущего случая, он всегда остается в DOM, изменяется лишь значение css свойства display;
• v-bind — привязывает динамические данные к HTML-атрибуту;
• v-model — также отвечает за привязку данных, но делает ее двухсторонней;
• v-on — добавляет событие и его обработчики на элемент.

Фильтры. Это инструменты представления данных для их фильтрации на уровне объектной модели. То есть данные тоже располагаются в хранилищах, но их отображение происходит определенным образом, не обязательно идентичным изначально сохраненному. Фильтры позволяют:

• улучшать представление приложения благодаря контролю слоя, с которым работает Vue;
• настраивать их глобальный доступ, а затем повторно использовать в любом компоненте проекта для повышения эффективности;
• форматировать данные на уровне представления или непосредственно в объектной модели документа.

Экосистема Vue.js

Менять функционал и инструментарий можно с помощью дополнительных библиотек и инструментов. Их создают как официальные разработчики, так и энтузиасты сообщества. Инструменты и библиотеки составляют экосистему Vue.js. Она включает:

• router — пакет, отвечающий за маршрутизацию. Он поддерживает вложенные маршруты к компонентам, упрощает API для навигации, контролирует поведение скрола и переходы;
• vuex — библиотека и паттерн управления состоянием. Служит централизованным хранилищем данных для всех компонентов приложения с правилами, гарантирующими, что состояние может быть изменено только предсказуемым образом;
• devtools — плагин для отладки в браузере, отображающий наличие и состояние компонентов;
• server-renderer — пакет для серверного рендеринга компонентов в HTML-код с отправкой в браузер. Это позволяет быстрее отображать интерфейс;
• CLI — инструмент командной строки, упрощающий и ускоряющий разработку приложений на Vue.js;
• loader — плагин для загрузки веб-пакетов, с помощью которого можно создавать компоненты Vue в однофайловом формате (SFC).

Найти полный список полезных дополнений можно на GitHub.

Примеры сайтов на Vue.js

Chess.com. Сайт, который посвящен игре в шахматы. Посещаемость — около 20 млн пользователей в месяц. На сайте реализована возможность играть в шахматы онлайн.

Codeship.com. Облачная платформа для программистов, где можно сохранять веб-приложения.

Livestorm. Платформа, позволяющая создавать вебинары. 

* Принадлежит компании Meta, деятельность которой признана экстремистской в России.