Vue.js 3, Vue Router и Pinia

• Vue и Pinia
• Как устроен курс
• Обзор проектов
• Проекты домашних заданий
• Обзор курсов
• Работа на платформе
• AI и тренажёры
• Практика на проекте

• Настройка окружения
• Настройки VSCode
• Рекомендуемый курс
• Установка Node
• О работе NVM
• Создание проекта
• Домашнее задание AI

• Обзор проекта
• Структура компонент
• Настройка eslint
• Шаблоны
• Bind атрибутов
• JS в шаблонах
• Composition API
• Тест — Основы
• Тренажёр — Основы
• Занятие — Основы
• Домашнее задание — Основы

• Макет проекта
• Упражнение — Глобальный стиль
• Что такое компоненты
• Первый компонент
• Стилизация
• Slot
• Несколько slot
• Декомпозиция на компоненты
• Упражнение — Сборка app
• Тест — Компоненты
• Тренажёр — Компоненты
• Занятие — Компоненты
• Домашнее задание — Компоненты

• Компонент статистики
• defineProps
• withDefaults
• v-bind
• Использование svg
• Упражнение — Ввод города
• Events
• defineEmits
• Валидация emits
• Наследование атрибутов
• Тест — Свойства и события
• Тренажёр — Свойства и события
• Занятие — Свойства и события
• Домашнее задание — Свойства и события

• Как работает реактивность
• Proxy
• ref
• reactive
• Unwrap
• nextTick
• Упражнение — Состояние редактирования
• computed
• Тест — Реактивность
• Тренажёр — Реактивность
• Занятие — Реактивность
• Домашнее задание — Реактивность

• v-if
• v-else
• v-show
• Упражнение — Input
• v-for
• Упражнение — Список данных
• Наивная реализация input
• v-model
• defineModel
• Тест — Шаблоны и модели
• Тренажёр — Шаблоны и модели
• Занятие — Шаблоны и модели
• Домашнее задание — Шаблоны и модели

• Lifecycle Hooks
• Примеры Hooks
• watch
• API погоды
• Получение данных
• keyup
• Упражнение — Привязка данных
• Упражнение — Обработка ошибок
• Динамические стили
• Упражнение — Карточка погоды
• Упражнение — Вывод прогноза
• Тест — Жизненный цикл
• Тренажёр — Жизненный цикл
• Занятие — Жизненный цикл
• Домашнее задание — Жизненный цикл

• Динамические классы
• Свои директивы
• Упражнение — Левая панель
• Рефакторинг компонент
• Provide Inject
• Реализация с Provide Inject
• Symbol key
• Упражнение — Передача данных
• Упражнение — Финал приложения
• Тест — Custom directive и Provide Inject
• Тренажёр — Custom directive и Provide Inject
• Занятие — Custom directive и Provide Inject
• Домашнее задание — Custom directive и Provide Inject

• Почему TypeScript
• Рекомендуемый курс
• Создание приложения
• Обзор проекта
• Запуск API
• Работа с API
• Подготовка стилей
• Типизация defineProps
• Типизация ответа API
• Тест — Переход на TypeScript
• Занятие — Переход на TypeScript
• Домашнее задание — Переход на TypeScript
• Отзыв о курсе

• Почему Pinia
• Установка Pinia
• Store профиля
• Actions
• Упражнение — Перенос в профиль
• Добавление axios
• Упражнение — Store для категорий
• Упражнение — Вывод списка
• Создание категории
• Тест — Pinia
• Занятие — Pinia
• Домашнее задание — Pinia

• Установка Vue Router
• RouterView
• children
• Упражнение — Страница входа
• useRouter
• LazyLoading
• Vue DevTools
• Active links
• Динамические пути
• Упражнение — Главная страница
• Helpers
• onBeforeRouteUpdate
• Упражнение — Получение закладок
• NotFound
• Тест — Vue Router
• Занятие — Vue Router
• Домашнее задание — Vue Router

• Типизация defineModel
• Работа с формой
• Отправка запроса на авторизацию
• JWT
• Хранения в LocalStorage
• NavigationGuard
• Данные за авторизацией
• Упражнение — Редактирование категории
• Упражнение — Удаление категории
• Упражнение — Компонент закладки
• Упражнение — Вывод списка закладок
• Типизация defineEmits
• Тест — Авторизация
• Занятие — Авторизация
• Домашнее задание — Авторизация

• Упражнение — добавление закладки
• useTemplateRef
• Component Registration
• Async Components
• Teleport
• Transition
• Сборка для production
• Тест — Встроенные компоненты
• Занятие — Встроенные компоненты
• Домашнее задание — Встроенные компоненты

• Куда двигаться дальше
• Финальное тестирование
• Собеседование с AI наставником
• Практика собеседования с AI

• Основы Scrum
• Старт задачи
• Выполнение задачи
• Код ревью
• Старт работы

Сертификат