После прохождения курса вы сможете:
- Создавать проект на Vue
- Понимать реактивность данных
- Работать с Vue Router
- Использовать Pinia
- Управлять состоянием данных в компонентах
- Использовать Reactive API
- Писать в стиле Composition API
- Взаимодействовать с API
- Создавать формы на Vue
- Работать с жизненным циклом компонентов
- Использовать Vue с TypeScript
- Пользоваться встроенными компонентами
- Знать синтаксис шаблонов Vue и директивы
Минимальные требования: Знание JavaScript, Знание TypeScript будет плюсом, Знание HTML и CSS.
В этом курсе мы изучим Vue, Vue Router и Pinia, создавая два полноценных приложения. Мы сделаем приложение для отображения прогноза погоды и Saas сервис хранения веб закладок. Этот курс идеально подойдёт тем, кто уже знаком с основами HTML, CSS и JavaScript и готов начать работать с одним из популярных frontend фреймворков — Vue.js. Если вы уже имеете опыт работы с другими JavaScript фреймворками, этот курс поможет вам быстро освоить Vue и его экосистему.
Курс ориентирован на практическое освоение, и весь теоретический материал будет подкреплён реальными проектами. Вместо стандартных примеров, мы будем работать с настоящими API и создавать приложения, которые имитируют реальные сценарии. В процессе мы подробно изучим Vue Router для работы с маршрутами и Pinia для управления состоянием. Также в курсе предусмотрено множество упражнений, которые помогут вам углубить понимание технологий и доработать проекты, созданные на занятиях.
Программа курса
1. Введение
- Vue и Pinia
- Как устроен курс
- Обзор проектов
- Проекты домашних заданий
- Обзор курсов
- Работа на платформе
- AI и тренажёры
- Стажировка в студии
2. Настройка окружения
- Настройка окружения
- Настройки VSCode
- Установка Node
- О работе NVM
- Создание проекта
- Домашнее задание AI
3. Основы
- Обзор проекта
- Структура компонент
- Настройка eslint
- Шаблоны
- Bind атрибутов
- JS в шаблонах
- Composition API
- Тест — Основы
- Занятие — Основы
- Домашнее задание — Основы
4. Компоненты
- Макет проекта
- Упражнение — Глобальный стиль
- Что такое компоненты
- Первый компонент
- Стилизация
- Slot
- Несколько slot
- Декомпозиция на компоненты
- Упражнение — Сборка app
- Тест — Компоненты
- Занятие — Компоненты
- Домашнее задание — Компоненты
5. Свойства и события
- Компонент статистики
- defineProps
- withDefaults
- v-bind
- Использование svg
- Упражнение — Ввод города
- Events
- defineEmits
- Валидация emits
- Наследование атрибутов
- Тест — Свойства и события
- Занятие — Свойства и события
- Домашнее задание — Свойства и события
6. Реактивность
- Как работает реактивность
- Proxy
- ref
- reactive
- Unwrap
- nextTick
- Упражнение — Состояние редактирования
- computed
- Тест — Реактивность
- Занятие — Реактивность
- Домашнее задание — Реактивность
7. Шаблоны и модели
- v-if
- v-else
- v-show
- Упражнение — Input
- v-for
- Упражнение — Список данных
- Наивная реализация input
- v-model
- defineModel
- Тест — Шаблоны и модели
- Занятие — Шаблоны и модели
- Домашнее задание — Шаблоны и модели
8. Жизненный цикл
- Lifecycle Hooks
- Примеры Hooks
- watch
- API погоды
- Получение данных
- keyup
- Упражнение — Привязка данных
- Упражнение — Обработка ошибок
- Динамические стили
- Упражнение — Карточка погоды
- Упражнение — Вывод прогноза
- Тест — Жизненный цикл
- Занятие — Жизненный цикл
- Домашнее задание — Жизненный цикл
9. Custom directive и Provide Inject
- Динамические классы
- Свои директивы
- Упражнение — Левая панель
- Рефакторинг компонент
- Provide Inject
- Реализация с Provide Inject
- Symbol key
- Упражнение — Передача данных
- Упражнение — Финал приложения
- Тест — Custom directive и Provide Inject
- Занятие — Custom directive и Provide Inject
- Домашнее задание — Custom directive и Provide Inject
10. Переход на TypeScript
- Почему TypeScript
- Рекомендуемый курс
- Создание приложения
- Обзор проекта
- Запуск API
- Работа с API
- Подготовка стилей
- Типизация defineProps
- Типизация ответа API
- Тест — Переход на TypeScript
- Занятие — Переход на TypeScript
- Домашнее задание — Переход на TypeScript
- Отзыв о курсе
11. Pinia
- Почему Pinia
- Установка Pinia
- Store профиля
- Actions
- Упражнение — Перенос в профиль
- Добавление axios
- Упражнение — Store для категорий
- Упражнение — Вывод списка
- Создание категории
- Тест — Pinia
- Занятие — Pinia
- Домашнее задание — Pinia
12. Vue Router
- Установка Vue Router
- RouterView
- children
- Упражнение — Страница входа
- useRouter
- LazyLoading
- Vue DevTools
- Active links
- Динамические пути
- Упражнение — Главная страница
- Helpers
- onBeforeRouteUpdate
- Упражнение — Получение закладок
- NotFound
- Тест — Vue Router
- Занятие — Vue Router
- Домашнее задание — Vue Router
13. Авторизация
- Типизация defineModel
- Работа с формой
- Отправка запроса на авторизацию
- JWT
- Хранения в LocalStorage
- NavigationGuard
- Данные за авторизацией
- Упражнение — Редактирование категории
- Упражнение — Удаление категории
- Упражнение — Компонент закладки
- Упражнение — Вывод списка закладок
- Типизация defineEmits
- Тест — Авторизация
- Занятие — Авторизация
- Домашнее задание — Авторизация
14. Встроенные компоненты
- Упражнение — добавление закладки
- useTemplateRef
- Component Registration
- Async Components
- Teleport
- Transition
- Сборка для production
- Тест — Встроенные компоненты
- Занятие — Встроенные компоненты
- Домашнее задание — Встроенные компоненты
15. Заключение
- Куда двигаться дальше
- Финальное тестирование
- Собеседование с AI наставником
