Курс по изучению frontend-фреймворка Vue 3 на примере CRM системы [Lectoria] [Артем Зернов]

[Bot]

Введение и теория

• Концепция Virtual DOM. Концепция компонентного подхода. Концепция реактивности. Как работает реактивность под капотом.

Создание проекта, установка необходимых пакетов и файлов

• Пару слов про окружение
• Установка Vue и настройка сборщика Vite
• Подготовка исходников от CRM

Корневой компонент App. SFC. Простая интерполяция. Options API и Composition API

• Структура Vue-компонента, инициализация компонента и Vue приложения. SFC подход.
• Сравнение Composition API и Options API.

Жизненный цикл компонента

• Разбираем этапы, через которые проходит обработка компонента. Хуки для внедрения функциональности.

События и методы. Слушатели событий. Модификаторы событий

• Разбираем особенности обработки нативных событий во Vue3. Определение методов компонента. Особенности использования методов компонента в качестве обработчиков событий.

Vue devtools. Инструменты разработчика

• Разбираем возможности плагина для отладки Vue-приложений в режиме development

Cтилизация

• Разбираем возможности изолированной и неизолированной стилизации компонента

Отрисовка в цикле. Директива v-for

• Особенности отрисовки списковых элементов. Оптимизация списков.

Отрисовка по условию

• Разбираем директивы условной отрисовки на примере реальных компонентов будущей CRM системы.

Двустороннее связывание и v-model

• Особенности передачи значений реактивных свойств в интерактивных полях ввода.

Модификаторы v-model

• Встроенные "твики" Vue для дополнительной обработки значений при двустороннем связывании

Именованные v-model

• Разбираем возможности для множественного двустороннего связывания на одном элементе при помощи именованных моделей

Компоненты. Создаем небольшую библиотеку компонентов.

• Разбираем файловую организацию компонентов. Создаем дополнительные компоненты и разбираем способ их подключения для переиспользования в разных точках приложеия.

Глобальная регистрация компонента

• Подключаем универсальные часто используемые компоненты в приложение.

Атрибуты style и class. Динамическая привязка классов и стилей.

• Разбираем возможности динамической привязки классов и стилей к отдельным элементам компонентов.

Props. Передача данных в компонент

• Разбираем возможности для обмена данными между родительским и дочерним компонентом при помощи встроенного механизма props. Разбираем особенности работы с props.

Событийный способ обмена данными между дочерним и родительским компонентом

• Разбор механизма обмена данными при помощи событий. Особенности такого способа обмена данными.

Двустороннее связывание в компонентах

• Разбор способов для двустороннего связывания в пользовательских компонентах

Ключи KEY в цикле

• Особенности применения ключей в цикле при отображении и удалении элементов в списках

Слоты и их применение

• Разбираем способ передачи данных при помощи слотов. Именованные слоты. Слоты по-умолчанию.

Работа с сервером. Получение данных. Fetch API

• Особенности взаимодействия с серверными данными при разработке компонентов Vue 3.

Индикатор загрузки данных

• Разбираем, как отображать и скрывать индикатор процесса загрузки данных в интерфейсе системы

Сортировка элементов в списке

• Разбираем на реальном компоненте возможности при отображении списка и сортировки элементов внутри такого списка.

Наблюдаемые WATCH и вычисляемые COMPUTED свойства

• Разбираем, как автоматически следить за изменениями одного или нескольких полей компонента. Отличие watch от computed.

Анимации переходов. Transition и TransitionGroup

• Разбираем встроенный механизм организации анимации переходов при построении Vue приложения.

Поиск элементов в списке. Фильтрация

• Как организовать оптимальную фильтрацию элементов в списке при помощи средств Vue

Пагинация. Постраничный вывод

• Разбираем, как организовать классический постраничный вывод информации при помощи Vue

Динамическая загрузка данных при скроллинге. Native Intersection API

• Разбираем, как организовать бесконечную ленту при помощи нативного Intersection API и Vue

Refs. Доступ к DOM элементу

• Разбираем встроенный механизм Vue для получения прямого доступа к элементам DOM дерева

VUE-ROUTER. Установка и пример использования.

• Организация многостраничных приложении при помощи Vue-Router

Динамическая навигация

• Разбираем возможности Vue-Router для динамических параметров URL

Директивы и события директив. Создаем собственные директивы.

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

Composables. Переиспользуемый функционал в рамках Composition API

• Разберем способ организации переиспользуемого кода в рамках CompositionAPI Vue.

Готовые use-модули. Библиотека VueUse

• Разбираем возможности библиотеки VueUse для оптимизации процесса разработки

Vuex/Pinia. Глобальное состояние приложения

• Разбираем необходимость использования хранилища глобального состояния при разработке крупных приложений на Vue.