После завершения курса вы узнаете особенности и тонкости работы с фреймворком VueJS, его отличия от других фреймворков, и научитесь работать с ним, даже если раньше никогда его не использовали. Курс ориентирован на работу с актуальной сейчас 2 версией VueJS с учетом востребованности знаний при работе с 3 версией. Курс подойдет тем, кто уже умеет работать с JavaScript и ES6.
Спойлер: Программа курса
После завершения курса вы узнаете особенности и тонкости работы с фреймворком VueJS, его отличия от других фреймворков, и научитесь работать с ним, даже если раньше никогда его не использовали.
Курс ориентирован на работу с актуальной сейчас 2 версией VueJS с учетом востребованности знаний при работе с 3 версией. Курс подойдет тем, кто уже умеет работать с JavaScript и 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
Подключение плагинов.
Использование 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.
Спойлер: Проекты
Личный проект
В каждом разделе вы будете выполнять задания по личному проекту. Над ним вы будете работать и самостоятельно, и в паре с наставником.
Виртуальная пиццерия «Mama Mia»
В течении курса студент будет разрабатывать виртуальную пиццерию, где посетители могут создавать свою пиццу из ингредиентов, формировать и отправлять заказ.
