Программа и содержание
Слив курса Vue.js 3, Vue Router и Pinia [Тариф Самостоятельный] [PurpleSchool] [Антон Ларичев]
Чему вы научитесь?
После прохождения курса вы сможете:
Создавать проект на 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. Введение
2. Настройка окружения
3. Основы
4. Компоненты
5. Свойства и события
6. Реактивность
7. Шаблоны и модели
8. Жизненный цикл
9. Custom directive и Provide Inject
10. Переход на TypeScript
11. Pinia
12. Vue Router
13. Авторизация
14. Встроенные компоненты
15. Заключение
Программа подробно:
1. Введение
1.1 Vue и Pinia
1.2 Как устроен курс
1.3 Обзор проектов
1.4 Проекты домашних заданий
1.5 Обзор курсов
1.6 Работа на платформе
1.7 AI и тренажёры
1.8 Стажировка в студии
2. Настройка окружения
2.1 Настройка окружения
2.2 Настройки VSCode
2.3 Установка Node
2.4 О работе NVM
2.5 Создание проекта
2.6 Домашнее задание AI
3. Основы
3.1 Обзор проекта
3.2 Структура компонент
3.3 Настройка eslint
3.4 Шаблоны
3.5 Bind атрибутов
3.6 JS в шаблонах
3.7 Composition API
3.8 Тест - Основы
С AI и тренажёрами
3.9 Занятие - Основы
С AI и тренажёрами
3.10 Домашнее задание - Основы
4. Компоненты
4.1 Макет проекта
4.2 Упражнение - Глобальный стиль
4.3 Что такое компоненты
4.4 Первый компонент
4.5 Стилизация
4.6 Slot
4.7 Несколько slot
4.8 Декомпозиция на компоненты
4.9 Упражнение - Сборка app
4.10 Тест - Компоненты
С AI и тренажёрами
4.11 Занятие - Компоненты
С AI и тренажёрами
4.12 Домашнее задание - Компоненты
5. Свойства и события
5.1 Компонент статистики
5.2 defineProps
5.3 withDefaults
5.4 v-bind
5.5 Использование svg
5.6 Упражнение - Ввод города
5.7 Events
5.8 defineEmits
5.9 Валидация emits
5.10 Наследование атрибутов
5.11 Тест - Свойства и события
С AI и тренажёрами
5.12 Занятие - Свойства и события
С AI и тренажёрами
5.13 Домашнее задание - Свойства и события
6. Реактивность
6.1 Как работает реактивность
6.2 Proxy
6.3 ref
6.4 reactive
6.5 Unwrap
6.6 nextTick
6.7 Упражнение - Состояние редактирования
6.8 computed
6.9 Тест - Реактивность
С AI и тренажёрами
6.10 Занятие - Реактивность
С AI и тренажёрами
6.11 Домашнее задание - Реактивность
7. Шаблоны и модели
7.1 v-if
7.2 v-else
7.3 v-show
7.4 Упражнение - Input
7.5 v-for
7.6 Упражнение - Список данных
7.7 Наивная реализация input
7.8 v-model
7.9 defineModel
7.10 Тест - Шаблоны и модели
С AI и тренажёрами
7.11 Занятие - Шаблоны и модели
С AI и тренажёрами
7.12 Домашнее задание - Шаблоны и модели
8. Жизненный цикл
8.1 Lifecycle Hooks
8.2 Примеры Hooks
8.3 watch
8.4 API погоды
8.5 Получение данных
8.6 keyup
8.7 Упражнение - Привязка данных
8.8 Упражнение - Обработка ошибок
8.9 Динамические стили
8.10 Упражнение - Карточка погоды
8.11 Упражнение - Вывод прогноза
8.12 Тест - Жизненный цикл
С AI и тренажёрами
8.13 Занятие - Жизненный цикл
С AI и тренажёрами
8.14 Домашнее задание - Жизненный цикл
9. Custom directive и Provide Inject
9.1 Динамические классы
9.2 Свои директивы
9.3 Упражнение - Левая панель
9.4 Рефакторинг компонент
9.5 Provide Inject
9.6 Реализация с Provide Inject
9.7 Symbol key
9.8 Упражнение - Передача данных
9.9 Упражнение - Финал приложения
9.10 Тест - Custom directive и Provide Inject
С AI и тренажёрами
9.11 Занятие - Custom directive и Provide Inject
С AI и тренажёрами
9.12 Домашнее задание - Custom directive и Provide Inject
10. Переход на TypeScript
10.1 Почему TypeScript
10.2 Рекомендуемый курс
10.3 Создание приложения
10.4 Обзор проекта
10.5 Запуск API
10.6 Работа с API
10.7 Подготовка стилей
10.8 Типизация defineProps
10.9 Типизация ответа API
10.10 Тест - Переход на TypeScript
С AI и тренажёрами
10.11 Занятие - Переход на TypeScript
С AI и тренажёрами
10.12 Домашнее задание - Переход на TypeScript
10.13 Отзыв о курсе
11. Pinia
11.1 Почему Pinia
11.2 Установка Pinia
11.3 Store профиля
11.4 Actions
11.5 Упражнение - Перенос в профиль
11.6 Добавление axios
11.7 Упражнение - Store для категорий
11.8 Упражнение - Вывод списка
11.9 Создание категории
11.10 Тест - Pinia
С AI и тренажёрами
11.11 Занятие - Pinia
С AI и тренажёрами
11.12 Домашнее задание - Pinia
12. Vue Router
12.1 Установка Vue Router
12.2 RouterView
12.3 children
12.4 Упражнение - Страница входа
12.5 useRouter
12.6 LazyLoading
12.7 Vue DevTools
12.8 Active links
12.9 Динамические пути
12.10 Упражнение - Главная страница
12.11 Helpers
12.12 onBeforeRouteUpdate
12.13 Упражнение - Получение закладок
12.14 NotFound
12.15 Тест - Vue Router
С AI и тренажёрами
12.16 Занятие - Vue Router
С AI и тренажёрами
12.17 Домашнее задание - Vue Router
13. Авторизация
13.1 Типизация defineModel
13.2 Работа с формой
13.3 Отправка запроса на авторизацию
13.4 JWT
13.5 Хранения в LocalStorage
13.6 NavigationGuard
13.7 Данные за авторизацией
13.8 Упражнение - Редактирование категории
13.9 Упражнение - Удаление категории
13.10 Упражнение - Компонент закладки
13.11 Упражнение - Вывод списка закладок
13.12 Типизация defineEmits
13.13 Тест - Авторизация С AI и тренажёрами
13.14 Занятие - Авторизация С AI и тренажёрами
13.15 Дом