Omnex.Study
Курсы / Программирование
💚

Vue.js с нуля

От первого {{ }} до задеплоенного SPA на Composition API, Pinia и Vue Router — освой самый дружелюбный фреймворк и бери фронтенд-заказы уровня middle.

Средний уровень30 часов модулей уроковДоступ навсегда
4 9907 990
Начать бесплатно — первый модуль в подарок

Разовая оплата, без подписки. Школьнику курс покупает родитель из кабинета parents.omnex.study.

О КУРСЕ

Ты знаешь JavaScript, но каждый новый интерфейс на «ванильном» JS превращается в ручное дёрганье DOM, путаницу с обновлениями и код, который через месяц не понимаешь сам. Vue меняет правила: ты описываешь, как интерфейс зависит от данных, — а фреймворк держит всё в актуальном состоянии за тебя. Этот курс проведёт тебя от первой реактивной переменной до полноценного приложения, задеплоенного в интернет, — на самом дружелюбном фреймворке «большой тройки».

Мы не тратим время на устаревший Options API и сразу учим тому, как пишут в 2025 году: Composition API, <script setup>, Vite, Pinia и Vue Router. Каждая тема раздроблена на маленькие шаги с живыми примерами, врезками про типичные ошибки и мини-проверками. Ты не просто читаешь — ты собираешь: todo-приложение, мини-библиотеку UI-компонентов, виджет погоды на реальном API, многостраничный блог и, наконец, каталог фильмов с поиском, избранным и деплоем.

Vue стабильно входит в топ требований на фронтенд-вакансиях, а разработчик со Vue в России зарабатывает от 80–120 тыс. руб. на старте до 200–300 тыс. на уровне middle+. К концу курса у тебя будет не абстрактное «я читал про Vue», а пять работающих проектов в портфолио и живые ссылки, которые можно показать работодателю. Именно это превращает знание в оффер.

РЕЗУЛЬТАТ

Чему научишься.

ПРОГРАММА

модулей, уроков.

01

Первые шаги с Vue

Бесплатный модуль

Понимаешь, что такое Vue и зачем он тебе, поднимаешь первое приложение прямо в браузере и осваиваешь фундамент: реактивность, вывод данных, условия, списки и события.

  • Почему именно VueТеория · 20 мин
  • Первое приложение: createApp за 5 минутТеория · 25 мин
  • Реактивное состояние: ref()Теория · 30 мин
  • reactive() и когда что использоватьТеория · 25 мин
  • Вывод данных: интерполяция и v-bindТеория · 30 мин
  • Условия и списки: v-if, v-show и v-forТеория · 30 мин
  • События: v-on и методыТеория · 25 мин
  • Квиз: основы VueТест · 15 мин
02

Vite и Single-File Components

Переходишь от игрушечного CDN к настоящему проекту на Vite, разбираешь устройство .vue-файла, осваиваешь computed и watch и собираешь первое портфолио-приложение — полноценный todo-лист с сохранением.

  • Настоящий проект: Vite и npm create vueТеория · 30 мин
  • Анатомия .vue файла (SFC)Теория · 25 мин
  • script setup изнутриТеория · 25 мин
  • Вычисляемые свойства: computedТеория · 30 мин
  • Наблюдатели: watch и watchEffectТеория · 25 мин
  • Проект: Todo-приложение с сохранениемПроект · 55 мин
  • Квиз: Vite, SFC и реактивностьТест · 15 мин
03

Компоненты: строим интерфейс из кирпичиков

Учишься дробить интерфейс на переиспользуемые компоненты и связывать их: передаёшь данные через props, получаешь события через emit, делаешь двусторонние связи через defineModel и вставляешь произвольный контент через слоты. В финале собираешь мини-библиотеку UI.

  • Дробим интерфейс на компонентыТеория · 25 мин
  • Props: данные сверху внизТеория · 30 мин
  • Валидация и значения по умолчанию propsТеория · 25 мин
  • Собственные события: defineEmitsТеория · 30 мин
  • v-model на компоненте: defineModelТеория · 25 мин
  • Слоты: вставляем произвольный контентТеория · 30 мин
  • Проект: мини-библиотека UI-компонентовПроект · 55 мин
  • Квиз: компоненты и их связиТест · 15 мин
04

Формы, стили и работа с DOM

Осваиваешь v-model на всех типах полей и его модификаторы, динамически управляешь классами и стилями, получаешь прямой доступ к DOM через template refs и пишешь настоящую валидацию формы. Итог — практикум с формой регистрации.

  • v-model на всех типах полейТеория · 30 мин
  • Модификаторы v-model: .lazy, .number, .trimТеория · 20 мин
  • Динамические классы и стилиТеория · 25 мин
  • Прямой доступ к DOM: template refsТеория · 25 мин
  • Валидация формы своими рукамиТеория · 30 мин
  • Практикум: форма регистрации с валидациейПрактика · 45 мин
  • Квиз: формы, стили и DOMТест · 15 мин
05

Жизненный цикл и переиспользование логики

Разбираешься, когда именно компонент рождается и умирает, и цепляешься за эти моменты хуками. Учишься выносить логику в переиспользуемые composables, пишешь собственный useFetch, пробрасываешь данные сквозь дерево через provide/inject и подключаешь компоненты динамически. Финал — виджет погоды на реальном API.

  • Хуки жизненного циклаТеория · 25 мин
  • Composables: логика напрокатТеория · 30 мин
  • Пишем свой useFetchТеория · 30 мин
  • provide и inject: данные сквозь деревоТеория · 25 мин
  • Динамические и асинхронные компонентыТеория · 25 мин
  • Проект: виджет погоды на composableПроект · 55 мин
  • Квиз: жизненный цикл и composablesТест · 15 мин
06

Роутинг с Vue Router

Превращаешь одностраничное приложение в полноценный сайт с несколькими страницами: подключаешь Vue Router, настраиваешь маршруты и ссылки, работаешь с параметрами URL, навигируешь из кода и защищаешь страницы. Итог — многостраничный блог.

  • SPA и зачем нужен роутерТеория · 20 мин
  • Устанавливаем Vue Router и первые маршрутыТеория · 30 мин
  • Навигация: router-link и активные ссылкиТеория · 25 мин
  • Динамические маршруты и параметрыТеория · 30 мин
  • Программная навигация: useRouterТеория · 25 мин
  • Вложенные маршруты, 404 и ленивая загрузкаТеория · 30 мин
  • Проект: многостраничный блогПроект · 60 мин
  • Квиз: роутинг с Vue RouterТест · 15 мин
07

Управление состоянием с Pinia

Решаешь боль общего состояния: перестаёшь прокидывать данные через десяток компонентов и выносишь их в централизованное хранилище Pinia. Осваиваешь state, getters и actions, правильно достаёшь данные через storeToRefs и грузишь их асинхронно. Практикум — корзина интернет-магазина.

  • Боль общего состояния и prop drillingТеория · 25 мин
  • Первый store на PiniaТеория · 30 мин
  • State, getters и actionsТеория · 25 мин
  • storeToRefs: достаём данные правильноТеория · 25 мин
  • Асинхронные actions: данные с сервераТеория · 30 мин
  • Практикум: корзина интернет-магазинаПрактика · 50 мин
  • Квиз: Pinia и управление состояниемТест · 15 мин
08

API, сборка и деплой

Доводишь навыки до боевого уровня: работаешь с REST API через fetch и axios, грамотно обрабатываешь все состояния данных, прячешь конфигурацию в переменные окружения, собираешь проект на продакшн и выкладываешь его в интернет. Финал курса — полноценный каталог фильмов, объединяющий всё.

  • REST API: fetch и axiosТеория · 30 мин
  • Состояния данных: loading, error, emptyТеория · 25 мин
  • Переменные окружения и конфигурацияТеория · 25 мин
  • Сборка и оптимизация проектаТеория · 25 мин
  • Деплой: выкладываем сайт в интернетТеория · 25 мин
  • Финальный проект: каталог фильмовПроект · 90 мин
  • Квиз: API, сборка и деплойТест · 15 мин
ИНСТРУМЕНТЫ

С чем будешь работать.

Vue 3 (Composition API, <script setup>)Vite — сборщик и сервер разработкиVue Router — маршрутизация в SPAPinia — управление состояниемaxios и встроенный Fetch API — запросы к серверуNode.js и npmVS Code + расширение Vue - Official (Volar)Vue Devtools — отладка компонентов и стора в браузереGit и GitHub, хостинг Netlify или Vercel для деплоя

Vue.js с нуля: первый модуль — бесплатно.

Начать бесплатно — первый модуль в подарок
Vue.js с нуля | Omnex.Study