Все курсы

Курс по Vue.JS

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

Программа

Vue отлично подходит для итерационной разработки или постепенного рефакторинга существующих приложений. С чем вы самостоятельно убедитесь, создавая небольшое приложение на курсе — начнём с самой простой HTML-страницы и закончим небольшим SPA-приложением с серверным рендерингом и тестами.

  1. Знакомимся с Vue, узнаём как он работает. Разбираем как легко и быстро можно начать его использовать. Изучаем все основы и подступимся к компонентам и компонентному подходу в реализации приложения.
  2. Изучаем официальную библиотеку роутинга, обсуждаем каким образом можно реализовать проверку авторизации пользователя. Добавляем сборку Vue приложения с помощью Webpack.
  3. Научимся использовать сторонние плагины в приложении. Обсудим возможные способы валидации данных.
  4. Познакомимся с официальной библиотекой для реализации единого хранилища состояний Vuex. Разберём возможности по реализации Server-side rendering + Vue. Изучим какие есть инструменты и каким образом тестировать компоненты.

Детали программы смотрите далее.

Основные темы программы

  • Блок 1
  • Блок 2
  • Блок 3

Блок 1

Vue, основы и использование в существующих приложениях

Знакомимся с Vue, разбираемся как его подключать и начинать использовать в существующих приложениях.

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

Изучаем работу с компонентами: как их создавать, как использовать, как передавать в них данные и отслеживать возникающие события. Рассматриваем динамическое переключение компонентов.

  • Vue, принцип работы реактивности.
  • Варианты подключения и сборок, Vue-devtools.
  • Синтаксис шаблонов, работа с атрибутами.
  • Экземпляр Vue, свойства, методы и хуки жизненного цикла.
  • Вычисляемые свойства компонента, отслеживание данных.
  • Работа с условиями, циклами.
  • Работа с классами и стилями.
  • Обработка событий.
  • Работа с формами.
  • Компоненты: как создавать, как использовать, как передавать в них данные и отслеживать возникающие события.
  • Динамическое переключение компонентов.

Блок 2

Vue-router, однофайловые компоненты и реализация SPA с шагом сборки Webpack

Изучаем Vue-router — библиотеку для роутинга Vue: как работать с маршрутами, хуки и где они пригодятся.

Начинаем использовать Vue CLI и сборку с помощью Webpack и однофайловых компонентов: как использовать шаблонизаторы, препроцессоры, локальные стили.

Разбираемся как использовать сторонние плагины, как создавать собственные компоненты-обёртки для них.

  • Vue CLI, какие возможности предоставляет модульная архитектура новой версии.
  • Vue-router, работа с маршрутами, как передавать параметры, хуки маршрутизации.
  • Однофайловые компоненты и их возможности.
  • Асинхронная загрузка компонентов.
  • Использование слотов в компонентах.
  • Использование сторонних плагинов и создание компонентов-обёрток для них.
  • Как получить доступ к DOM-элементу.

Блок 3

Пути дальнейшего развития приложения

Изучаем каким образом можно реализовать единое хранилище состояния с помощью Vuex.

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

  • Vuex, когда необходим, как мутировать состояние и как его получать, работа с формами.
  • Способы реализации SSR в Vue.
  • Тестирование компонентов.
  • Практические рекомендации по написанию хорошего кода на Vue.

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

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

После каждого занятия будет небольшое домашнее задание. Если при его выполнении возникнут проблемы – доступен чат группы, где также присутствует преподаватель.

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

Затем мы изучим официальную библиотеку роутинга — какие возможности она предоставляет, обсудим каким образом можно реализовать проверку авторизации пользователя. Добавим сборку Vue приложения с помощью Webpack и увидим какие ещё приятные возможности привносит эта связка и использование однофайловых компонентов. Разберёмся как можно использовать другие шаблонизаторы, препроцессоры, и каким образом использовать локальные стили или CSS-модули.

Следующим шагом мы научимся использовать сторонние плагины в приложении, без головной боли и возможных сайд-эффектов. Вы увидите, что часто нет необходимости искать «vue-версии» плагинов, когда можете самостоятельно реализовать компонент-обёртку, а затем переиспользовать в других местах вашего приложения. Обсудим возможные способы валидации данных.

В конце мы познакомимся с официальной библиотекой для реализации единого хранилища состояний Vuex: когда он нужен, какие принципы заложены и как с ними отличается подход к работе приложения. Разберём возможности по реализации Server-side rendering + Vue. Изучим какие есть инструменты и каким образом тестировать компоненты.

Результат обучения

  1. Вы будете знать как интегрировать Vue в уже существующие приложения и представлять чёткий путь как итерационно переписывать проект, постепенно избавляясь от старого кода.
  2. Вы сможете создавать собственные компоненты для переиспользования в разных частях вашего приложения.
  3. Вы будете понимать что не нужно всегда искать "vue-версии" плагинов и сможете самостоятельно реализовывать всё необходимое для использования сторонних плагинов в проекте.
  4. Вы сможете с удобством работать с формами и событиями и знать как валидировать данные.
  5. Вы будете знать каким образом реализовывать SPA-приложения на Vue.
  6. Вы будете представлять как реализовать централизованное хранилище для Vue
  7. Вы будете знать какие есть способы по реализации серверного рендеринга с Vue.
  8. Вы будете представлять каким образом тестировать компоненты и на что следует обращать внимание.
  9. Вы будете знать что Vue не привносит в код вашего проекта никакой "магии".

Гарантия

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

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

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

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

PhotoАлександр Соколов

Frontend-разработчик более пяти лет, за это время удалось переписать портал на Vue.js и параллельно обучить пару-тройку коллег, которым был интересен этот фреймворк.

Community partner команды разработчиков Vue.js (по разработке экосистемы Vue), а также один из администраторов группы перевода, чьими силами переведена и поддерживается в актуальном состоянии вся русская документация по Vue.js и смежным проектам (vue-router, vuex, vue-loader, ssr guide).

Дополнительная информация

  • Для этого курса нужно знание JavaScript и знакомство с CSS/HTML.

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

  • Windows или Mac поддерживаются полностью.

    Под Linux доступно участие онлайн и просмотр видеолекций, но для просмотра записей занятий нужен Dual Boot в Win/MacOS.

    Для онлайн-общения желателен интернет от 256kb/s.

Комментарии

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