Баннер мобильный (3) Пройти тест

Vue.js

Глоссарий

1 марта 2024

Поделиться

Скопировано

Содержание

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

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

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

    Все термины

    Поделиться

    Скопировано

    0 комментариев

    Комментарии