Все курсы

Курс по Vue.js

Курс по профессиональной разработке веб-приложений с помощью Vue.js.

Vue.js

Цели курса

Курс посвящён разработке на Vue 3: от использования его как небольшой библиотеки до создания современного SPA приложения.

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

Набор приостановлен, идёт переработка и обновление программы на последние подходы к разработке с использованием Vue 3.

В конце апреля новая программа будет опубликована и откроется набор на новый курс по Vue.

Узнать о новой программе и начале набора можно, запросив уведомление.

Как организовано обучение?

Курс идёт примерно 1.5 месяца.

До начала обучения: вводные материалы

За неделю до начала курса вы получите письмо с материалами для подготовки к курсу.

Мы также будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку - дадим крэш-курс и поможем разобраться.

Онлайн-занятия с преподавателем 2 раза в неделю

Занятие проходит в формате вебинара. Запись занятия доступна через 15 минут после окончания. Вы также сохраняете доступ к записям после окончания курса.

Домашние задания, обратная связь по ним

Ваши решения присылаете преподавателю, он проверяет качество кода, использование правильных приёмов проектирования, даёт обратную связь.

Чат

Между занятиями доступен групповой чат для общения и вопросов преподавателю.

Курсовой проект

Делаем курсовой проект: сервис организации митапов, большую часть которого Вы реализуете самостоятельено.

Результат

Вы владеете основными возможностями Vue и библиотек его экосистемы.

Вы умеете разрабатывать Vue-компоненты и применять для этого различные подходы.

Вы знакомы с особенностями работы Vue.

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

Сертификат

По окончанию курсов вы получаете сертификат в электронном виде на русском и английском языках.

Хотя сертификатам в нашей профессии обычно не придают значения. Главное - знания и умения, которые вы получите, если будете полноценно участвовать в курсе.

img

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

Блок 1

Знакомство с Vue и компонентами

В начале курса мы познакомимся с Vue.js как небольшой библиотекой, использующейся без систем сборки. Изучим основные Vue и разработки компонентов.

  • Основные концепции в разработке на Vue.
  • Создание Vue приложения.
  • Options API.
  • Синтаксис шаблона.
  • Реактивность, вычисляемые свойства, отслеживание.
  • Работа с DOM событиями, атрибутами, элементами форм.
  • Хуки жизненного цикла.
  • Компонентный подход и описание компонентов на Vue.
  • Входные параметры и события компонентов.
  • Слоты и именованные слоты компонентов.

Блок 2

Vue во Frontend разработке

Изучив основы, перейдём к современному подходу к разработке JavaScript приложений во Frontend разработке. Познакомимся с различными инструментами разработки во Frontend и Vue. Разберёмся с концепцией одностраничных приложений и научимся создавать из на Vue с Vue Router.

  • Инструменты разработки во Frontend: транспайлеры, линтер, сборщики и другие.
  • Однофайловые компоненты во Vue (SFC).
  • Создание и разработка Vue приложений с Vue CLI.
  • Создание и разработка Vue приложений с Vite.
  • Одностраничные приложения (SPA).
  • Разработка SPA на Vue с Vue Router.

Блок 3

Углубление во Vue

После знакомства с инструментальной частью вернёмся к разработке Vue компонентов, научимся создавать компоненты обёртки и разберёмся с однонаправленным потоком данных в компонентах. В середине курса будем погружаться в работу Vue: подробнее разберёмся, как работает реактивность и используется вне Options API, углубимся в работу рендеринга.

  • Компоненты обёртки, динамический компонент.
  • Компоненты редактирования данных и однонаправленный поток данных.
  • Углубление в реактивность: реализация, ограничения, использование вне Vue компонентов.
  • Углубление в рендеринг: Virtual DOM, render-функция, JSX, key, компонент KeepAlive.

Блок 4

Взаимодействие компонентов, Composition API и shared state

Рассмотрим другие варианты взаимодействия Vue компонентов и их применимость в разных задачах. Затем перейдём к вариантам переиспользования кода компонентов в Options API и перейдём на Composition API - новый подход разработки компонентов во Vue 3. С переходом на Composition, посмотрим варианты работы с общим состоянием компонентов и познакомимся с центральными хранилищами Vuex и Pinia.

  • Scoped slots.
  • Event Bus.
  • Teleport.
  • Provide/Inject.
  • Пользовательские директивы.
  • Создание Vue плагинов.
  • Переиспользование кода в компонентах, миксины, предпосылки к Composition API.
  • Composition API и composables.
  • Shared state.
  • Центральные хранилища: Vuex, Pinia.

Блок 5

Завершение курса

Когда Vue и использование Vue компонентов уже будут изучены, научимся тестировать их использование с Jest и Vue Test Utils. В конце курса вспомним проблемы SPA и рассмотрим варианты их решения. В завершении перейдём к задачам разработки приложения за пределами Vue компонентов, поговорим об архитектуре приложения и работе с HTTP API.

  • Unit-тестирование Vue компонентов с Jest и Vue Test Utils.
  • Проблемы SPA и способы их решения: prerendering и server-side rendering.
  • Архитектура приложения за пределами Vue.

Курсовой проект

Сервис для "митапов" (собраний, конференций)

  1. Одностраничное приложение: роутинг, динамическая подгрузка страниц.
  2. Вывод в виде календаря или списка.
  3. Работа с формами: компоненты форм, генерация.
  4. Сетевые запросы, HTTP API, аутентификация.
  5. Современная архитектура.

Предварительные требования

  • Знание основ HTML/CSS: умение работать с основными HTML элементами и готовой вёрсткой.
  • Знание JavaScript, включая ES2015+ и основы работы с HTTP API.
  • Интернет 256kb/s или быстрее для видео.

Преподаватель

Photo
Григорий ШарцевВедёт курс с 15 июня 2020

Веб-разработкой занимаюсь с 2014 года, а с Vue начал работать с 2017 года. С 2022 года занимаюсь frontend разработкой платформы общения Nextcloud Talk в компании Nextcloud.

Также давно занимаюсь и преподаванием. Вёл свой курс веб-разработки в университете и 9 лет учу школьников алгоритмам и решению нестандартных задач в лагерях спортивного программирования. Активно участвую в русскоязычных ИТ сообществах.

Что говорят о курсе участники?

Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний.

Все отзывы являются честными. Мы не модерируем их.

Курс регулярно обновляется. Все отзывы относятся к последней версии курса.

Гарантия

  • Если объяснения будут вам непонятны
  • Если курсы не дадут вам новых знаний и умений
  • Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

Для этого достаточно не позже окончания первой недели курса написать, что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно.

Для компаний

У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами.

  • При записи нужно выбрать способ оплаты "счёт на компанию", и документы будут автоматически сгенерированы: договор, акт и счёт, есть лицензия.
  • Для зарубежных компаний выдаём инвойс на английском языке.
  • Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов.

Физические лица также могут сделать налоговый вычет: детали для РФ.

Подписаться на уведомления по курсу

Набор возобновится в следующем году, идёт переработка и обновление программы. Вы можете запросить уведомление:

Мы рассылаем уведомления только когда вы их запрашиваете, вы можете отказаться в любой момент. Подписываясь на рассылку, вы соглашаетесь с политикой конфиденциальности. Мы не передаём email третьим лицам.

Если остались вопросы – посмотрите в часто задаваемых, напишите в комментариях внизу этой страницы или на почту help@javascript.ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.

Комментарии

перед тем как писать…
  • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.