Логотип Prowid — курсы программирования PROWIDIT Education Academy

Vue.js

Курс Vue.js — Prowid
Длительность курса
2 мес/ 10 уроков
Индивидуально
В мес 160 AZN
В группе
В мес 130 AZN
При оплате за весь курс в группе
15% скидка
Оплата по частям
50/50
По подписке
от 30 AZN в мес
Vue.js — прогрессивный JavaScript-фреймворк для создания интерфейсов и одностраничных приложений (SPA). Курс построен на Vue 3 и Composition API.

Идёт набор в новую группу — оставьте заявку, чтобы забронировать место

Записаться на курс Бесплатный пробный урок

Или учитесь сами в личном кабинете → по подписке от 30 AZN в месяц

Программа курса

Введение во Vue 3: проект на Vite, Single File Components
Синтаксис шаблонов и директивы: v-if, v-for, v-bind, v-model
Реактивность: ref, reactive, computed, watch
Composition API и <script setup>
Работа с классами и стилями
События и формы
Компоненты: props, emits, slots
Взаимодействие компонентов: provide/inject и composables
Переходы и анимации
Vue Router: SPA и защита маршрутов
Управление состоянием с Pinia
Работа с API и асинхронные операции
Vue + TypeScript
Знакомство с Nuxt: SSR и SEO
Тестирование (Vitest) и деплой
Финальный проект
Как мы учим?

Этапы обучения

01

Вебинар

Студенты подключаются к уроку в прямом эфире. В конце каждого урока студентам отправляется видеозапись занятия.

02

Домашнее задание

Все задания основаны на теме, пройденной на вебинаре. Домашняя работа помогает закрепить материал и лучше его понять.

03

Работа с ментором

Преподаватель на связи с группой и во время обучения, и вне занятий. Возникающие вопросы решаются сразу.

04

Портфолио

За время курса вы выполните несколько проектов на разные темы — они покажут работодателям ваши навыки.

Самостоятельное обучение

Полная программа в личном кабинете

111 тем с теорией, примерами и практикой. Первые 4 — бесплатно, остальные — по подписке. Интерактивных уроков со слайдами и тренажёрами: 100.

Начать бесплатно Подписка — от 30 AZN в месяц
Знакомство с Vueтем: 5
  1. Что такое Vue и зачем он нужен
  2. Создание проекта: create-vue и Vite
  3. Структура проекта и точка входа: createApp и mount
  4. Однофайловые компоненты (SFC): template, script setup и style
  5. Инструменты разработчика: VS Code, Vue DevTools, ESLint и Prettier
Шаблонный синтаксис и директивытем: 7
  1. Интерполяция и JavaScript-выражения в шаблоне
  2. Директивы: синтаксис, аргументы, модификаторы и сокращения
  3. v-bind: привязка атрибутов и свойств
  4. Условный рендеринг: v-if, v-else-if, v-else и v-show
  5. v-for: вывод массивов, объектов и диапазонов
  6. Атрибут key и как Vue обновляет списки
  7. Специальные директивы: v-html, v-text, v-once, v-pre и v-cloak
Реактивностьтем: 10
  1. ref: реактивные значения и .value
  2. reactive: реактивные объекты и когда выбирать ref
  3. Как устроена реактивность: Proxy, track и trigger
  4. Подводные камни реактивности: деструктуризация, toRef и toRefs
  5. shallowRef, readonly, markRaw и toRaw
  6. computed: вычисляемые свойства и кеширование
  7. Фильтрация, поиск и сортировка списков через computed
  8. watch: наблюдение за изменениями и его опции
  9. watchEffect и очистка побочных эффектов
  10. Проект: приложение-викторина
Стили, события и формытем: 10
  1. Динамические классы: объектный и массивный синтаксис
  2. Динамические inline-стили и CSS-переменные
  3. Стили в SFC: scoped, :deep, CSS Modules и v-bind в CSS
  4. Обработка событий: v-on, методы и inline-обработчики
  5. Модификаторы событий: .prevent, .stop, .once и другие
  6. Модификаторы клавиш и мыши: .enter, .esc, .ctrl, .exact
  7. v-model: двусторонняя привязка текстовых полей и модификаторы
  8. v-model для checkbox, radio и select
  9. Отправка формы и простая ручная валидация
  10. Проект: список задач (Todo)
Компоненты: основытем: 10
  1. Компоненты: создание, регистрация и организация
  2. Props: передача данных в компонент через defineProps
  3. Валидация props: типы, required, default и validator
  4. События компонента: defineEmits и передача данных наверх
  5. v-model на компонентах: defineModel
  6. defineModel: несколько v-model, аргументы и свои модификаторы
  7. Проброс атрибутов: $attrs, inheritAttrs и useAttrs
  8. Слоты: основной слот, именованные слоты и запасное содержимое
  9. Слоты с параметрами (scoped slots) и renderless-компоненты
  10. Проект: каталог товаров с фильтрами
Жизненный цикл, DOM и анимациитем: 8
  1. Хуки жизненного цикла: onMounted, onUpdated, onUnmounted
  2. Ссылки на элементы: useTemplateRef и ref в шаблоне
  3. Ссылки на компоненты и defineExpose
  4. nextTick и асинхронное обновление DOM
  5. Пользовательские директивы
  6. Transition: CSS-переходы и анимации появления
  7. Режимы переходов, appear и JavaScript-хуки
  8. TransitionGroup: анимация списков
Продвинутые компонентытем: 8
  1. provide и inject: передача данных через дерево компонентов
  2. Динамические компоненты: <component :is>
  3. KeepAlive: кеширование компонентов
  4. Асинхронные компоненты: defineAsyncComponent и Suspense
  5. Teleport: модальные окна и всплывающие элементы
  6. Render-функции и h(): когда шаблона недостаточно
  7. Options API: сравнение с Composition API
  8. Проект: мини UI-кит — Modal, Tabs и Accordion
Composables, VueUse и плагинытем: 7
  1. Composables: выносим логику из компонентов
  2. Composables с реактивными аргументами: toValue и MaybeRefOrGetter
  3. VueUse: состояние, хранилище и API браузера
  4. VueUse: элементы, события, debounce и throttle
  5. Плагины Vue: app.use и собственный плагин
  6. Обзор UI-библиотек: Vuetify, PrimeVue, Element Plus и другие
  7. Проект: плагин уведомлений (toast) с composable useToast
HTTP-запросы и работа с APIтем: 5
  1. Загрузка данных через fetch: состояния loading, error и data
  2. Axios: экземпляр клиента, интерцепторы и обработка ошибок
  3. Слой API и переменные окружения: .env и import.meta.env
  4. Свой useFetch: асинхронный composable, отмена и гонки запросов
  5. Проект: приложение погоды с внешним API
Маршрутизация с Vue Routerтем: 9
  1. Vue Router: установка, первые маршруты и RouterView
  2. Навигация: RouterLink, активные ссылки и router.push
  3. Динамические маршруты: параметры, props и страница 404
  4. Query-параметры: состояние фильтров и пагинации в URL
  5. Вложенные маршруты, макеты и именованные представления
  6. Навигационные хуки: beforeEach, beforeEnter и хуки в компонентах
  7. Защита маршрутов: meta, авторизация и редирект после входа
  8. Ленивая загрузка маршрутов, scrollBehavior и анимация страниц
  9. Проект: многостраничное приложение с авторизацией
Управление состоянием с Piniaтем: 7
  1. Pinia: зачем нужно хранилище и первый store
  2. State в Pinia: чтение, изменение, $patch и storeToRefs
  3. Геттеры в Pinia: производные данные
  4. Действия в Pinia: синхронная и асинхронная логика
  5. Pinia вне компонентов: связи между stores и router guards
  6. Плагины Pinia и сохранение состояния (persistedstate)
  7. Проект: интернет-магазин с корзиной на Pinia
TypeScript и валидация формтем: 10
  1. TypeScript во Vue: настройка проекта и vue-tsc
  2. Типизация props, emits и defineModel
  3. Типизация ref, reactive, computed, событий и template refs
  4. Типизация provide/inject и composables
  5. Дженерик-компоненты и типизация слотов
  6. Типизация ответов API, Vue Router и Pinia
  7. VeeValidate: useForm, defineField и сообщения об ошибках
  8. Схемы валидации на Zod и интеграция с VeeValidate
  9. Сложные формы: массивы полей, асинхронная проверка и ошибки сервера
  10. Проект: типизированная многошаговая форма регистрации
Производительность и тестированиетем: 8
  1. Обработка ошибок: errorHandler, onErrorCaptured и мониторинг
  2. Производительность рендеринга: лишние обновления, v-memo и большие списки
  3. Оптимизация загрузки: размер бандла, code splitting и изображения
  4. Vitest: основы модульного тестирования
  5. Vue Test Utils: монтирование компонентов и проверка вывода
  6. Тестирование событий, emits и форм
  7. Тестирование асинхронного кода, Pinia и Vue Router
  8. Проект: покрываем тестами интернет-магазин
Сборка, деплой и Nuxtтем: 7
  1. Сборка для продакшна: vite build, режимы и конфигурация Vite
  2. Деплой SPA: Netlify, Vercel, GitHub Pages и nginx
  3. Nuxt: зачем он нужен, создание проекта и структура
  4. Nuxt: файловая маршрутизация, layouts и middleware
  5. Nuxt: получение данных — useFetch, useAsyncData и server/api
  6. Nuxt: режимы рендеринга, SEO и деплой
  7. Финальный проект: полноценное приложение на Vue

Группа и индивидуальные занятия — это преподаватель, проверка заданий и сертификат. Подписка — материалы, тренажёры и прогресс в своём темпе, без обратной связи преподавателя.

Курс Vue.js: как записаться

Заполните форму — сообщим дату старта ближайшей группы, расписание и условия оплаты. А можно сначала прийти на бесплатный пробный урок.

+994 77 333 38 36 Или сразу напишите в WhatsApp info@prowid.com

Отправляя форму, вы соглашаетесь, что данные будут использованы только для связи с вами.

WhatsApp