Курс по Vue.JS

Тестовый набор на курс по Vue.JS

Программа

Курс состоит из трёх частей:

  1. В первой части мы разберём все основные части Vue, которые используются везде и всюду.
  2. Во второй части изучим, как использовать компонентный подход при реализации приложений, узнаем какие возможности предоставляет Vue, а также познакомимся с официальным роутингом для Vue.
  3. В третьей части изучим, как использовать сторонние плагины в своих приложениях, как быстро и удобно можно создавать собственные компоненты-обёртки для повторного использования. Познакомимся с реализацией единого хранилища Vuex и разберем каким образом Vue можно подружить с Server-side rendering (SSR).

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

Набор в группы

Количество участников в группе ограничено.

Вы также можете подписаться на уведомления по набору новых групп по этой программе:

На ваш email придёт письмо с информацией о дате и деталях программы.

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

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

Блок 1

Vue и его основы

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

  • Vue, принцип работы реактивности
  • Подключение, варианты сборок, vue-devtools
  • Экземпляр Vue: его свойства, хуки жизненного цикла
  • Синтаксис шаблонов, работа с атрибутами
  • Работа с условиями и циклами
  • Работа с классами и стилями
  • Вычисляемые свойства, отслеживание
  • События
  • Работа с формами
  • Получение доступа к DOM-элементу

Блок 2

Vue + Компоненты (+ SPA) + сторонние плагины

Углубляемся в изучение компонентного подхода в Vue, как создавать компоненты, как их использовать, как передавать данные и отслеживать произошедшие в них события. Познакомимся с роутингом на Vue и плюсами использовании шага сборки с помощью Webpack. Разберемся как в проектах использовать сторонние плагины, а также как создавать собственные компоненты-обёртки для удобного использования плагинов и переиспользования.

  • Vue-router
  • Однофайловые компоненты и их возможности
  • Слоты в компонентах
  • Использование сторонних vue/js-плагинов
  • Создание собственных обёрток над jq/js-плагинами

Блок 3

Какие ещё возможности для приложений предоставляет Vue

Пробежимся по возможностям которые предоставляет Vue для расширения приложений (анимации, разработка собственных плагинов). Рассмотрим каким образом можно реализовать единое хранилище для Vue, что делать если потребуется серверный рендеринг для приложения Vue.

  • Анимации
  • Vuex
  • SSR + Vue

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

По мере курса мы будем реализовывать небольшую админку пользователей на Vue.

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

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

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

На четвёртом занятии займемся созданием компонентов-обёрток над плагинами, настройкой v-model для компонентов и изучим слоты.

На пятом занятии посмотрим у кого что получилось и увидим какие есть варианты дальнейшего развития приложения, например добавлением централизованного хранилища (Vuex), и вариантами как реализовать SSR.

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

  1. Вы сможете быстро начинать разработку с Vue или интегрировать его в уже существующие веб-приложения, постепенно избавляясь от старого кода с кучей побочных эффектов.
  2. Вы сможете создавать собственные компоненты и обёртки над плагинами для удобного переиспользования в других местах веб-приложения.
  3. Вы сможете с удобством работать с формами и событиями.
  4. Вы будете представлять как реализовать централизованное хранилище для Vue и какие варианты реализации server-side rendering уже доступны.

Системные требования

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

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

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

Требования к участникам

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

Комментарии

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