Vue.js

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

Логотип 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. Платформа, позволяющая создавать вебинары. 

Другие термины на букву «V»

VPN

Все термины

Освойте новую профессию

(рейтинг: 5, голосов: 5)
Добавить комментарий