Программа и содержание

После завершения курса вы узнаете особенности и тонкости работы с фреймворком 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.