Vue

Что это?

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

Для чего нужно это знать?

Vue подходит для небольших проектов, которым необходимо добавить немного реактивности, представить форму с помощью AJAX, отобразить значения при вводе данных пользователем, авторизация или другие аналогичные задачи. Vue легко масштабируется и хорошо подходит для объемных проектов, поэтому его называют прогрессивным фреймворком. Vue также отлично подходит для крупных одностраничных приложений благодаря своим основным компонентам, таким как Router и Vuex. С Vue можно как использовать общедоступные API для создания приложений, так и реализовывать выполняемые сервером приложения. Но Vue лучше всего подходит для разработки решений, которые используют внешние API для обработки данных. С помощью Vue также можно создавать frontend блога на популярных CMS. 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-if — обеспечивает отрисовку элемента в соответствии с переданным значением (true демонстрирует элемент, false — скрывает); v-show — также отображает элемент, но в, отличие от предыдущего случая, он всегда остается в DOM, изменяется лишь значение css свойства display; v-bind — привязывает динамические данные к HTML-атрибуту; v-model — также отвечает за привязку данных, но делает ее двухсторонней; v-on — добавляет событие и его обработчики на элемент. Фильтры. Это инструменты представления данных для их фильтрации на уровне объектной модели. То есть данные тоже располагаются в хранилищах, но их отображение происходит определенным образом, не обязательно идентичным изначально сохраненному. Фильтры позволяют: улучшать представление приложения благодаря контролю слоя, с которым работает Vue; настраивать их глобальный доступ, а затем повторно использовать в любом компоненте проекта для повышения эффективности; форматировать данные на уровне представления или непосредственно в объектной модели документа.

Где я могу освоить этот навык?

Освоить навык «Vue» ты можешь проходя обучение в нашей менторинге по программе «Frontend-разработчик». Более подробно навык изучается в проекте Vue TODO List.