Программа
Vue отлично подходит для итерационной разработки или постепенного рефакторинга существующих приложений. С чем вы самостоятельно убедитесь, создавая небольшое приложение на курсе — начнём с самой простой HTML-страницы и закончим небольшим SPA-приложением с серверным рендерингом и тестами.
- Знакомимся с Vue, узнаём как он работает. Разбираем как легко и быстро можно начать его использовать. Изучаем все основы и подступимся к компонентам и компонентному подходу в реализации приложения.
- Изучаем официальную библиотеку роутинга, обсуждаем каким образом можно реализовать проверку авторизации пользователя. Добавляем сборку Vue приложения с помощью Webpack.
- Научимся использовать сторонние плагины в приложении. Обсудим возможные способы валидации данных.
- Познакомимся с официальной библиотекой для реализации единого хранилища состояний 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 и однофайловых компонентов: как использовать шаблонизаторы, препроцессоры, локальные стили. Разбираемся как использовать сторонние плагины, как создавать собственные компоненты-обёртки для них и как при необходимости получать доступ к DOM-элементу.
- Vue CLI, какие возможности предоставляет модульная архитектура новой версии.
- Vue-router, работа с маршрутами, как передавать параметры, хуки маршрутизации.
- Однофайловые компоненты и их возможности.
- Асинхронная загрузка компонентов.
- Использование слотов в компонентах.
- Использование сторонних плагинов и создание компонентов-обёрток для них.
- Как получить доступ к DOM-элементу.
Блок 3
Пути дальнейшего развития приложения
Изучаем каким образом можно реализовать единое хранилище состояния с помощью Vuex. Рассмотрим какие есть способы реализации серверного рендеринга для Vue. Каким образом тестировать компоненты. Обсудим рекомендации по тому, как писать код.
- Vuex, когда необходим, как мутировать состояние и как его получать, работа с формами.
- Способы реализации SSR в Vue.
- Тестирование компонентов.
- Рекомендации по написанию кода на Vue.
Как проходит обучение?
На курсе у нас будет семь насыщенных занятий, на которых мы будем изучать Vue, постепенно создавая на нем приложение.
После каждого занятия будет небольшое домашнее задание. Если при его выполнении возникнут проблемы – доступен чат группы, где также присутствует преподаватель.
Сначала мы познакомимся с Vue, узнаем как он работает. Начнем его использовать, посмотрим как удобно подключить его к существующему проекту, какие при этом возникают нюансы. Разберём все основы и подступимся к компонентам и компонентному подходу в реализации приложения.
Затем мы изучим официальную библиотеку роутинга — какие возможности она предоставляет, обсудим каким образом можно реализовать проверку авторизации пользователя. Добавим сборку Vue приложения с помощью Webpack и увидим какие ещё приятные возможности привносит эта связка и использование однофайловых компонентов. Разберёмся как можно использовать другие шаблонизаторы, препроцессоры, и каким образом использовать локальные стили или CSS-модули.
Следующим шагом мы научимся использовать сторонние плагины в приложении, без головной боли и возможных сайд-эффектов. Вы увидите, что часто нет необходимости искать «vue-версии» плагинов, когда можете самостоятельно реализовать компонент-обёртку, а затем переиспользовать в других местах вашего приложения. Обсудим возможные способы валидации данных.
В конце мы познакомимся с официальной библиотекой для реализации единого хранилища состояний Vuex: когда он нужен, какие принципы заложены и как с ними отличается подход к работе приложения. Разберём возможности по реализации Server-side rendering + Vue. Изучим какие есть инструменты и каким образом тестировать компоненты.
Результат обучения
- Вы будете знать как интегрировать Vue в уже существующие приложения и представлять чёткий путь как итерационно переписывать проект, постепенно избавляясь от старого кода.
- Вы сможете создавать собственные компоненты для переиспользования в разных частях вашего приложения.
- Вы будете понимать что не нужно всегда искать "vue-версии" плагинов и сможете самостоятельно реализовывать всё необходимое для использования сторонних плагинов в проекте.
- Вы сможете с удобством работать с формами и событиями и знать как валидировать данные.
- Вы будете знать каким образом реализовывать SPA-приложения на Vue.
- Вы будете представлять как реализовать централизованное хранилище для Vue
- Вы будете знать какие есть способы по реализации серверного рендеринга с Vue.
- Вы будете представлять каким образом тестировать компоненты и на что следует обращать внимание.
- Вы будете знать что Vue не привносит в код вашего проекта никакой "магии".
Гарантия
- Если объяснения будут вам непонятны
- Если курсы не дадут вам новых знаний и умений
- Если вы не сможете подключиться к системе онлайн-обучения
…то вы сможете получить деньги назад.
Для этого достаточно не позже окончания первой недели курса написать, указав причину из этого списка и что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно, удобным для вас способом.
Преподаватель
Александр Соколов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…)