После завершения курса вы узнаете особенности и тонкости работы с фреймворком VueJS, его отличия от других фреймворков, и научитесь работать с ним, даже если раньше никогда его не использовали. Курс ориентирован на работу с актуальной сейчас 2 версией VueJS с учетом востребованности знаний при работе с 3 версией. Курс подойдет тем, кто уже умеет работать с jаvascript и ES6.

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

Раздел 1

Основы синтаксиса и базовых возможностей Vue JS

• Особенности фреймворка VueJS. Сравнительный анализ с ReactJS и Angular 2+.
• Компонент Vue и хуки жизненного цикла.
• Настройка проекта с использованием Vue CLI.
• Файловая структура проекта.
• Структура компонета Vue (Template, Script, Style).
• Связывание данных между шаблоном, скриптами и стилями.
• Виды и использование условных операторов (v-if, v-show).
• Работа со списками. Взаимоотношение между v-for и v-if. Избежание базовых ошибок при работе со списками.
• Виды и обработка событий.

Раздел 2

Взаимодействие между компонентами Vue JS

• Виды взаимосвязей между компонентами.
• Передача параметров в дочерний компонент.
• Отправка событий в родительский компонент.
• Использование v-model между компонентами.
• Обзор работы хуков жизненного цикла при взаимодействии компонентов.

Раздел 3

Углубленное понимание Vue JS

• Директивы: виды и использование.
• Как работает реактивность компонента.
• Свойства компонента (this свойства).
• Данные и методы компонента.
• Глобальный доступ и изменение экземпляра Vue.
• Обзор Composition API.
• Работа с vue-router.
• Добавление middleware.

Раздел 4

Чистая архитектура проекта Vue

• Принципы Solid и их применение во Vue.
• Принцип единственной ответственности.
• Принцип открытости/закрытости.
• Принцип подстановки Б.Лисков.
• Принцип разделения интерфейсов.
• Принцип инверсии зависимостей.

Раздел 5

Работа с HTTP

• Подключение плагинов.
• Создание независимых модулей на примере http модуля.
• Использование fetch API.
• Использование axios.

Раздел 6

Анимации Vue JS

• Виды анимаций.
• Жизненный цикл анимаций.
• Примеры анимаций.

Раздел 7

Подключение и использование Vuex

• Для какие целей нам нужно глобальное хранилище.
• Подключение vuex к существующему проекту.
• Автоматическое подключение модулей к хранилищу.
• Структура модуля vuex.
• Изменение vuex с помощью mutations.
• Асинхронная работа с хранилищем: actions.
• Получение данных из хранилища: getters.

Раздел 8

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

• Зачем нужно тестирование?
• Тестирование компонентов с помощью Jest.
• Тестирование компонентов с помощью Mocha.
• Тестирование компонентов с помощью Karma.
• Тестирование асинхронного кода.
• Использование Vue-Router.
• Использование Vuex.

Раздел 9

Краткий обзор Nuxt JS

• Что такое Nuxt и для чего нужен рендер на стороне сервера.
• Отличие Nuxt от Vue. Структура Nuxt.
• Раутинг с Nuxt.
• Обзор fetch и asyncData.