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

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

Онлайн-курс, посвященный изучению всех возможностей frontend-фреймворка Vue 3. Изучаем подробно все детали фреймворка Vue 3.

• 28 подробных уроков по каждой теме
• Интересные домашние задания и тестирования для проверки усвоения материала

На кого рассчитан курс:

• Frontend и Fullstack разработчикам
  В курсе подробно разбираются все возможности Vue 3 на примере компонентов реального продукта.
• Начинающим frontend-разработчикам
  Изучите один из лучших и гибких инструментов для разработки реактивного frontend в короткие сроки.
• Работникам веб-студий
  Повышайте свою ценность в глазах команды и работодателя.
• Владельцам веб-студий
  Повышайте навыки и профессионализм своих своих сотрудников. Инвестируйте в обучение своей команды.

Какие знания необходимы для комфортного прохождения курса?

• Базовые навыки работы с bash-совместимым терминалом
• Базовые знания JavaScript
• Базовые навыки работы со средой разработки (WebStorm, PhpStorm, VSCode и прочие)
• Наличие времени на обучение не менее 5-6 часов в неделю

В рамках курса мы подробно разберем все возможности фреймворка VueJS 3 на примерах реальных компонентов интерфейса будущей CRM системы.

Программа курса:

• Введение и теория
• Создание проекта, установка необходимых пакетов и файлов
• Установка Vue и настройка сборщика Vite
• Подготовка исходников от CRM
• Корневой компонент App. SFC. Простая интерполяция. Options API и Composition API
• Сравнение Composition API и Options API.
• Жизненный цикл компонента
• События и методы. Слушатели событий. Модификаторы событий
• Vue devtools. Инструменты разработчика
• Cтилизация
• Отрисовка в цикле. Директива v-for
• Отрисовка по условию
• Двустороннее связывание и v-model
• Модификаторы v-model
• Именованные v-model
• Компоненты. Создаем небольшую библиотеку компонентов.
• Глобальная регистрация компонента
• Атрибуты style и class. Динамическая привязка классов и стилей.
• Props. Передача данных в компонент
• Событийный способ обмена данными между дочерним и родительским компонентом
• Двустороннее связывание в компонентах
• Ключи KEY в цикле
• Слоты и их применение
• Работа с сервером. Получение данных. Fetch API
• Индикатор загрузки данных
• Сортировка элементов в списке
• Наблюдаемые Watch и вычисляемые Computed свойства
• Анимации переходов. Transition и TransitionGroup
• Поиск элементов в списке. Фильтрация
• Пагинация. Постраничный вывод
• Динамическая загрузка данных при скроллинге. Native Intersection API
• Refs. Доступ к DOM элементу
• Vue-Router. Установка и пример использования.
• Динамическая навигация
• Директивы и события директив. Создаем собственные директивы.
• Composables. Переиспользуемый функционал в рамках Composition API
• Готовые use-модули. Библиотека VueUse
• Vuex/Pinia. Глобальное состояние приложения

Спойлер: Полная программа

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

• Концепция 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.

Автор курса - занимается веб-разработкой и программированием с 2006 года. Большую часть этого времени я работаю как самостоятельный разработчик и по совместительству менеджер проектов, создатель веб-студии OpenColour. Люблю доносить информацию о технологиях, в которых хорошо разбираюсь. Youtube-канал: OpenModx и Lectoria»

Цена 30000 руб
Скрытая ссылка