Top.Mail.Ru
code image
notebook image
code image
code image
курс:

10-недельный курс по изучению frontend-фреймворка Vue 3 на примере CRM системы (в записи)

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

Изучаем подробно все детали фреймворка Vue 3

  • 28 подробных уроков по каждой теме
  • Телеграм-чат для обмена опытом
  • Интересные домашние задания и тестирования для проверки усвоения материала
  • Личное общение с автором курса в телеграм и на личных консультациях

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

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

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

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

Что вы получите после покупки курса?

Наставничество от преподавателя
Личные консультации с Артемом Зерновым, помощь в решении сложных вопросов
Телеграм-чат
Все студенты смогут общаться между собой в общем телеграм-чате
Система личного рейтинга
Вы будете соревноваться с другими студентами по скорости решения домашних заданий и сдаче тестов
Разбивка по темам
В каждом уроке вы получаете подробную информацию по 1-2 темам и сможете вернуться к этой информации после прохождения

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

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

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

Артем Зернов

В этом курсе мы разберем все подробности Vue3 на примерах реальных компонентов CRM системы
разработчик с 15-летним стажем, автор курса
Как я связан с веб-разработкой:
Сервис онлайн-конференций
Узкоспециализированный закрытый сервис для проведения онлайн-конференций в сфере фармацевтики.
Сайт lectoria.pro
Данный сайт — это продукт, backend часть которого создана целиком и полностью моими руками.
Узкоспециализированные уроки
Создаю узкоспециализированные общедоступные уроки на Youtube-канале Lectoria
Реализация онлайн-чата
Создание модуля внутреннего чата для внутренней CRM заказчика
Более 150 сайтов
За всю свою практику я создал более 150 веб-сайтов различной сложности. По большей части на MODX Revolution.

Как проходит обучение?

  • Приобретаете курс
  • Получаете доступ в личный кабинет курса
  • Изучаете уроки по мере их публикации
  • Задаете вопросы в комментариях к урокам и в телеграм-чате
  • Получаете дополнительные материалы к урокам
Общение в чате с единомышленниками поддерживает интерес и позволяет быстро решать возникающие вопросы в процессе.

Да, вы можете изучать самостоятельно, но:

Время дорогой ресурс
Собственный поиск ответов занимает от 1 часа времени. Большинство ответов есть в базе знаний курса, а на новые вопросы, я отвечу лично
Банальный страх
Нет обратной связи и уверенности в своих действиях (если работает, не значит хорошо). Я даю развернутую обратную связь о том, как сделать код не только рабочим, но и быстрым, и эффективным.
Трудоемкий процесс
Поиск и перевод новых решений иногда может доходить до нескольких дней. Все нестандартные решения и новинки уже протестированы и внедрены мной.
Никакой поддержки
На форумах вы можете ждать ответа неделями и так его и не получить Не только я оперативно отвечу на ваш вопрос, но и закрытое сообщество программистов легко даст вам обратную связь.
Отсутствие понимания
Мало или почти нет видео с информацией, а пишут программисты не всегда понятно. Весь курс доступен в видео формате и вы можете повторить все действия за мной.
Трата нервов
Вы будете изобретать «велосипед» на нестандартные запросы клиентов. Со мной вы перестанете ломать голову как сделать очередное «хочу» от клиента, так как большинство из этих решений мы разберём на курсе.
Время дорогой ресурс
Банальный страх
Трудоемкий процесс
Никакой поддержки
Отсутствие понимания
Трата нервов

Стоимость обучения

Бессрочный доступ к урокам и материалам
Автор персонально работает с вами в течение всего курса
Телеграм-чат участников
Домашние задания
Тестирования
Доступ не ограничен
Структура рабочего проекта и используемые технологии в рамках курса
Структура рабочего проекта и используемые технологии в рамках курса
vue
vite
sass
bem

Часто
задаваемые вопросы

  • Сколько по времени длится курс?
    Каждую неделю мы проходим минимум по 4 урока и разбираем все возникающие вопросы. К сожалению, не все успевают проходить по 4 урока в неделю, поэтому программа была расширена с 8 до 10 недель.
  • Можно ли изучать курс, если я работаю?
    Основная часть обучения на курсе проходит в формате готовых видео-уроков. Поэтому вы можете изучать их в любое удобное для вас время, а возникающие вопросы решать в общем телеграм-чате. Ориентировочная загрузка — это 3-4 урока в неделю. Каждый урок требует выполнения домашнего задания и сдачи проверочного тестирования. Планируйте ваше время так, что на уроки у вас будет уходить минимум 8 часов в неделю на протяжении 60 дней.
  • Можно ли купить курс сейчас, а изучить позже?
    К сожалению, доступ к урокам открывается только при прохождении тестирования и сдаче домашних заданий. Это возможно только в процессе обучения всего потока.
  • А что, если я не смогу пройти курс из-за нехватки знаний?
    Не бойтесь, если вдруг какие-то вопросы будут непонятны с первого раза. Мотивация временем позволит вам в короткие сроки освоить новые знания с хорошей поддержкой преподавателя и студентов.
  • Будут ли на курсе уроки, посвященные изучению Laravel?
    Нет. Данный курс посвящен изучение фреймворка Vue JS 3 и его возможностей. Laravel — это отдельный продукт и его изучение предполагает как минимум отдельного обучающего курса.
  • Какой проект будем писать на курсе?
    В рамках курса мы будем изучать сначала по отдельности создание компонентов для закрепления отдельных аспектов фреймворка Vue 3, последовательно усложняя состав компонентов и постепенно мы придем к построению целого набора интерфейсов практически с полноценной логикой его составляющих.
Мы используем куки на нашем сайте. Продолжая просмотр, вы соглашаетесь с условиями пользовательского соглашения
Пожалуйста, подождите. Процесс оформления заказа может занимать до 30 секунд.