Курс по изучению 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 руб




СКАЧАТЬ СЛИВЫ КУРСОВ

Для возможности скачивать складчины и сливы курсов нужно зарегистрироваться