Курс по Vue.JS

О курсе «Курс по Vue.JS»

Программа

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

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

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

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

Блок 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-версии» плагинов и сможете самостоятельно реализовывать всё необходимое для использования сторонних плагинов в проекте.
• Вы сможете с удобством работать с формами и событиями и знать как валидировать данные.
• Вы будете знать каким образом реализовывать SPA-приложения на Vue.
• Вы будете представлять как реализовать централизованное хранилище для Vue
• Вы будете знать какие есть способы по реализации серверного рендеринга с Vue.
• Вы будете представлять каким образом тестировать компоненты и на что следует обращать внимание.
• Вы будете знать что Vue не привносит в код вашего проекта никакой «магии».