Курс Vue.js
Научитесь делать веб-интерфейсы на Vue.js: шаблоны, компоненты, реактивность и маршруты.
О курсе
Vue.js помогает создавать интерфейс из небольших компонентов и реактивных данных. Вы соберёте приложение, в котором пользователь переходит между экранами, вводит данные и видит результат запроса к API.
Чему научитесь
- Вывод данных, директивы и вычисляемые значения.
- Props, события, слоты и повторное использование элементов.
- Ввод данных, проверка формы и Vue Router.
- Запросы к API и знакомство с общим состоянием через Pinia.
Программа обучения
Для каждого раздела указан ориентировочный объём в парах. Одна пара — два академических часа. Состав и темп занятий можно уточнить под вашу цель и подготовку.
Шаблоны и реактивность2 пары
- Вывод данных, директивы и вычисляемые значения.
- Структура Vue-проекта и компонент одного файла
- Вывод данных и условные директивы
- Реактивные переменные и вычисляемые значения
Компоненты2 пары
- Props, события, слоты и повторное использование элементов.
- Передача props и события дочернего компонента
- Слоты для гибкого содержимого карточки
- Разделение страницы на повторно используемые блоки
Формы и маршруты2 пары
- Ввод данных, проверка формы и Vue Router.
- Двустороннее связывание полей формы
- Проверка значения и показ ошибки рядом с полем
- Маршруты, ссылки и параметры страницы
Работа с данными2 пары
- Запросы к API и знакомство с общим состоянием через Pinia.
- Загрузка JSON из API и состояния интерфейса
- Composition API для логики нескольких компонентов
- Сборка приложения с несколькими страницами
Общее состояние приложения2 пары
- Определение данных, нужных нескольким экранам
- Знакомство с Pinia и устройством store
- Обновление общего состояния после действия пользователя
- Разделение локальных и общих данных
Проверка и сборка2 пары
- Проверка форм и переходов между страницами
- Обработка пустого ответа и ошибки API
- Проверка интерфейса на узком экране
- Финальная сборка учебного приложения
Практическая работа и результат
Собираете приложение на Vue с формой, несколькими экранами и данными из API.
В процессе вы применяете темы программы к одной задаче, проверяете результат и исправляете ошибки вместе с преподавателем. Так после занятий у вас остаётся законченная учебная работа, а не только записи с объяснениями.
С чего начать
Нужны HTML, CSS и основы JavaScript. Если часть тем уже знакома, программу можно сместить в сторону более сложной практики.
Продолжить обучение
Эта тема входит в программу «Frontend-разработчик». Если вам нужно освоить направление целиком, обсудите с менеджером полную программу или отдельные занятия по этой теме.
Как проходят занятия
Аудитории, оборудование и практика — как это выглядит изнутри.