ТОП-20 лучших курсов Vue js: обучение онлайн, бесплатные и платные в 2024 году

Курс «Фреймворк Vue.js от Skillbox»»

Цена: Рассрочка – 1 857 ₽ / мес

Продолжительность: 3 месяца

Перейти на официальный сайт →

Для кого: для практикующих веб- и frontend-разработчиков.

Формат: Видеоуроки, практические работы

Обратная связь: Работа с проверяющим экспертом

Особенность: Итоговый проект, отработка знаний на практике

Сертификат

Чему научитесь:

• Работать с объектами, массивами, циклами реактивности и компонентами.
• Использовать Webpack.
• Использовать Vuex для управления данными.
• Работать с системой управления версиями Git.
• Создавать сайты и одностраничные приложения на Vue.js.
• Интегрировать проект с API, чтобы в динамике получать и отправлять данные на сервер.
• Делать развертку проекта из NPM.
• Готовить проект для продакшна и публикации.

Программа обучения:

1. Основы Vue

• Введение. Что такое Vue.
• Онлайн-сервисы для работы с кодом. Настройки окружения в codepen.io для Vue.
• Обзор возможностей Vue.
• Классы и стили. Анимации.

2. Создание проекта

• Установка проекта через Vue CLI.
• Структура проекта на Vue.
• Работа с системами контроля версий: решения на рынке. Удалённые репозитории.
• Работа с системами контроля версий. Установка и работа с Git.
• Подготовка среды для работы над проектом.
• Разбираем проект-пример.

3. Каталог товаров

• Компонент в одном файле.
• Состояние. Работа с циклами.
• Выводим список товаров.
• Основы компонентов. Входные параметры.
• Делаем компонент для товара.

4. Пагинация и фильтрация

• Инструмент разработчика Vue.
• Вычисляемые свойства, события, методы и наблюдатели.
• Организуем пагинацию.
• Модели (V-Model) и наследование компонентов.
• Организуем фильтрацию.

5. Страница товара

• Роутинг. Страница ошибок.
• Делаем страницу товара.
• Вывод цены с использованием фильтра.

6. Корзина

• Паттерн управления состоянием Vuex.
• Слоты.
• Организуем добавление товаров в корзину.
• Организуем список товаров в корзине.

7. Работа с API. Список товаров

• Обзор REST API (HTTP).
• Обзор технологии XHR. Инструменты для работы с асинхронностью. Обработка ошибок и исключений.
• Выводим список товаров и пагинацию из API.
• Прелоадеры и обработка ошибок.
• Фильтр из API. Состояние «Товары не найдены».
• Выводим страницу товара через API.
• Выводим корзину и добавляем товары из API.

8. Работа с API. Оформление заказа

• Работа с формами.
• Делаем страницу оформления заказа.

9. Деплой

• Сборка для продакшна.
• Публикация на GitHub.

10. Vue 3.0

• Установка и обновление.
• Новое API — v-model, emits, и рефактор проекта.
• Фрагменты, атрибуты и события.
• Телепорты и асинхронные компоненты.
• Composition API.
• Рефактор страницы товаров на Composition.
• Будущее и настоящее Vue 3.0.

Подробнее о курсе Vue.js →

Курс «Vue.js от Илья Кантор»»

Цена: 15 000 ₽

Продолжительность: 1.5 месяца

Перейти на официальный сайт →

Для кого: Для начинающих

Формат: Онлайн-занятия, домашние задания

Сертификат

Чему научитесь:

• овладеете основными возможностями Vue и библиотек его экосистемы.
• научитесь разрабатывать Vue-компоненты и применять для этого различные подходы.
• познакомитесь с особенностями работы Vue.
• сможете использовать Vue и как небольшую библиотеку, и для разработки одностраничных приложений.

Программа обучения:

1. Знакомство с Vue.js
2. Основы Vue.js

• Синтаксис шаблонов
• Реактивность вычисляемые свойства, отслеживание
• Работа с DOM событиями, атрибутами, формами
• Хуки жизненного цикла

3. Компоненты во Vue.js

• Компонентный подход
• Создание компонентов
• Параметры и события компонентов
• Слоты

4. Разработка приложений на Vue.js

• Инструменты разработки Frontend приложений
• Однофайловые компоненты (SFC) и инкапсуляция стилей
• Создание и разработка приложений с @vue/cli
• Одностраничные приложения (SPA)
• Маршрутизация на клиенте, vue-router
• Unit-тестирование Vue.js приложения с Jest и vue-test-utils

5. Углубление во Vue.js и разработку компонентов

• Компоненты-обёртки
• Компоненты-формы и однонаправленный поток данных
• Реактивность вне компонентов и реализация реактивности
• Основы рендеринга, Virtual DOM, render-функции, JSX
• Ограничения Vue.js, его зона ответственности и работа с другими библиотеками
• Scoped-slots, Renderless компоненты и другие подходы к разработке компонентов

6. Другие взаимодействия компонентов, расширение Vue и Composition API

• Шина событий
• Teleport
• provide/inject и варианты его применения
• Пользовательские директивы
• Миксины
• Плагины
• Composition API

7. Архитектура проекта

• Vuex: основы, модули, применение
• Архитектура приложения, организация работы с API и другие вопросы за границами Vue

8. Завершение курса.

Подробнее о курсе Vue.js →

Курс «Vue.js 2. C нуля до про от Tocode»»

Цена: 3 990 ₽

Продолжительность: ~21 ч

Перейти на официальный сайт →

Для кого: Для начинающих

Формат: Видеоуроки, домашние задания

Сертификат

Чему научитесь:

• Options API
• SPA
• Nuxt js
• Защите и авторизации
• Vuex
• Правильно разделять код и UI на компоненты
• REST API.

Программа обучения:

• Основы Options API
• Приложение с заметками
• Основы VUE CLI
• Vue Router
• Vuex
• Webpack в связке в vue.js
• Vuejs + Wepback для быстрой верстки
• Формы, модальные окна и валидация
• Приложение Shop
• REST API
• Приложение Users CRM
• Создание новостной ленты
• Приложение GitHub Finder
• SSR Блог на nuxt.js
• Дополнительный модуль
• Попробуй сделать
• Задачи с собеседований
• js 3 – Composition API
• Бонус к курсу вью 2.

Подробнее о курсе Vue.js →

Курс «Vue.js. Разработка клиентских приложений от ООО «Интерактивные обучающие технологии»»»

Цена: 19 900 ₽

Продолжительность: 4 месяца

Перейти на официальный сайт →

Для кого: Для начинающих

Формат: Теория, разбор кейсов, личный проект

Чему научитесь:

• работать с Vue.js, даже если никогда его не использовали, и узнаете его отличия от других фреймворков.

Программа обучения:

1. Основы синтаксиса и базовых возможностей Vue.js

• Особенности фреймворка Vue.js. Сравнительный анализ с React и Angular 2+.
• Настройка проекта с использованием Vue CLI.
• Дерево компонентов. Однофайловые компоненты.
• Структура компонента Vue (Template, Script, Style).
• Условные операторы и работа со списками.
• Хуки жизненного цикла компонента.
• Работа с Vue DevTools.

2. Взаимодействие между компонентами Vue.js

• Виды и обработка событий.
• Виды взаимосвязей между компонентами.
• Слоты и динамический контент.

3. Углублённое понимание Vue.js

• Как работает реактивность компонента?
• Свойства компонента (this свойства).
• Данные, вычисляемые свойства и методы компонента, миксины.
• Глобальный доступ к экземпляру Vue, плагины.
• Vue-директивы.
• Vue-маршрутизатор.

4. Подключение и использование Vuex

• Для каких целей нам нужно глобальное хранилище?
• Хранение данных. Vuex состояние.
• Вычисляемые свойства хранилища. Vuex-геттеры.
• Изменение состояния. Vuex-мутации.
• Работа с асинхронными задачами. Vuex-действия.
• Модули, плагины, Vuex this.

5. Работа с HTTP

• Создание и подключение API-сервиса.
• Создание и подключение сервиса для работы с токеном авторизации.
• Добавление middleware во Vue-маршрутизатор.

6. Анимации Vue.js

• Переходы и анимации.
• Жизненный цикл переходов и анимаций.
• Анимация списков.

7. Тестирование компонентов Vue.js

• Обзор Jest и Vue Test Utils.
• Глупые и умные компоненты. mount vs shallowMount.
• Модульные тесты для компонентов.

8. Продвинутые техники Vue.js

• Автоматизация Vue-маршрутизатора.
• Автоматизация подключения модулей Vuex.

9. Обзор Nuxt.js

• Рендеринг на стороне сервера и для чего это нужно.
• Различия между Nuxt.js и Vue.js.
• Маршрутизация Nuxt.js.
• Обзор fetch и asyncData.

Подробнее о курсе Vue.js →

Курс «Vue.js от Дмитрий Лаврик»»

Бесплатно

Перейти на официальный сайт →

Для кого: Для начинающих

Формат: Видеоуроки

Программа обучения:

• Подключение, объект DATA и реактивность данных
• директивы в Vue.js
• методы и вычисляемые свойства
• компоненты в Vue.js
• сборка с vue-cli и webpack
• js – варианты применения на практике
• Эволюция: от jQuery к Vue.js
• Идеи Vue и разработка с webpack
• js – интерактив №1
• js – атрибут key [решение интерактива №1].

Подробнее о курсе Vue.js →

Курс «Vue.js от ИП Минин В. И.»»

Цена: 9 990 ₽ – 19 990 ₽

Продолжительность: 1 месяц

Перейти на официальный сайт →

Формат: Видеоуроки, тесты

Сертификат

Чему научитесь:

• познакомитесь со всеми основами Vue.js на практике
• узнаете более детально про дополнительные элементы; про методы h, render и концепцию Virtual DOM; узнаете, как Vue работает с элементами формы
• напишем целое приложение с нуля.

Программа обучения:

• Введение
• Основы Vue
• Что еще есть во Vue
• Как работает Vue
• Работа с Vue CLI
• Все о компонентах
• Работа с элементами формы
• Vue и работа с HTTP
• Миксины, директивы и плагины
• Vue Router
• Vuex – Работа с данными
• Работа с Composition API
• Vue на TypeScript
• Практика. Создаем приложение.

Подробнее о курсе Vue.js →

Курс «Vue.js разработчик от OTUS»»

Цена: нет информации

Продолжительность: 4 месяца

Перейти на официальный сайт →

Формат: Вебинары

Сертификат

Чему научитесь:

• Продвинутым возможностям Vue, Vue-router, Vuex
• Создавать SPA-приложения и оптимизировать их для production
• Писать чистый и лаконичный код на ES6/ES8/TypeScript
• Писать интеграционные и юнит-тесты с Jest, Cypres
• Работать с GraphQL, Firebase, Electron, NativeScript.

Программа обучения:

1. Основы Vue

• Введение в курс, современная веб-разработка
• Vue, введение
• Шаблоны
• Компоненты props и события
• Формы, слоты, фильтры, директивы
• Использование CSS во Vue

2. Уверенная разработка на Vue

• Vue router
• Vuex работа с данными
• Тестирование Vue приложений
• Реактивные данные, MVVM и особенности Vue 3
• Продвинутый JavaScript
• Vue3 работа с библиотеками

3. Продвинутые и практические решения

• Интеграции Vue p1: GraphQL, OAuth 2.0
• Интеграции Vue p2 – FireBase, web sockets
• SSR с Nuxt
• Typescript
• Организация кода и паттерны Vue
• Консультация по дипломному проекту
• Десктоп приложения с Electron
• Инструменты современной разработки, cloud, CI/CD
• Анимация Vue
• Web components + Vue
• QA / Code review
• Функциональное программирование и продвинутый Vue

4. Проектная работа

• Выбор темы и организация проектной работы
• Консультация по проектам и домашним заданиям
• Защита проектных работ.

Подробнее о курсе Vue.js →

Курс «Vue.js. Продвинутая веб-разработка от Loft school»»

Цена: 22 000 ₽ – 28 600 ₽

Продолжительность: 6 недель

Перейти на официальный сайт →

Формат: Видеоуроки, самостоятельные работы

Сертификат

Чему научитесь:

• Разрабатывать одностраничные веб-приложения, используя один из самых востребованных JavaScript-фреймворков.
• Применять архитектурные паттерны, модули, ES6 и babel. Получите опыт работы с промисами и освоите асинхронность.
• Использовать продвинутую работу с модулями в webpack. А также пользоваться преимуществами Pug и PostCSS.
• Писать по-настоящему надёжный код, благодаря покрытию его тестами: от вёрстки до JavaScript-функционала.
• Наполнять свои сайты “жизнью”, благодаря впечатляющим визуальным эффектам с применением CSS и JavaScript решений.
• Использовать самые современные подходы к вёрстке сайтов при помощи PostCSS, а также компонентного подхода к вёрстке.

Программа обучения:

1. Workflow

• Открытие курса
• Основные возможности
• Однофайловые компоненты
• NPM
• Yarn
• Основы работы
• Обзор конфигурации
• Figma для верстальщика
• Flexbox
• GIT
• Воркшоп #1.

2. js

• Storybook
• JavaScript — ES6
• Асинхронность в JavaScript
• Библиотека для запросов
• Воркшоп #2

3. Нативный JavaScript

• Роутинг в браузере
• Менеджер состояния
• Вопрос-ответ
• Воркшоп #3

4. js, SPA

• Авторизация. Токены
• Воркшоп #4

5. Практика

• js. Composition API
• Тестирование JS-кода
• js. Тестирование компонентов
• Тестирование. Моки
• Воркшоп #5

6. Завершение работы над проектом

• Как получить работу в IT: фишки и советы.

Подробнее о курсе Vue.js →

Курс «Vue.js от IT Education Academy (ITEA)»»

Цена: 1 911 700 UZS

Продолжительность: 24 часа

Перейти на официальный сайт →

Чему научитесь:

• Разбираться в основных понятиях Vue.js и применять теорию на практике
• Настраивать среду разработки
• Уверенно работать с компонентами
• Реализовывать single page application
• Разрабатывать приложения с рендерингом на стороне сервера.

Программа обучения:

1. Знакомство с Vue

• Что такое Vue
• Подключение
• Vue в Dev-tool
• SPA (Vue + Vuex + Vue-router) – вступление

2. Vue – начало

• Vue экземпляр
• Синтаксис шаблона
• Компоненты (часть 1)
• Директивы (часть 1)

3. Vue – данные и методы

• Data, methods, computed, watch
• Хуки жизненного цикла

4. Директивы

• Классы и стили
• Условная отрисовка
• Отрисовка списков
• Отработка событий
• Работа с формами
• Кастомные директивы

5. Компоненты

• Регистрация (динамические и асинхронные)
• Data, params
• События, v-model
• Slots
• Крайние случаи
• Render и JSX

6. Animation
7. Переиспользование

• Mixins
• Plugins
• Filters

8. Vue – router
9. Vuex
10. SPA + SSR = Nuxt.js.

Подробнее о курсе Vue.js →

Курс «Основы Vue.js от metanit»»

Бесплатно

Перейти на официальный сайт →

Формат: Текстовые материалы

Программа обучения:

• Что такое Vue.js. Первое приложение
• Объект Vue
• Привязка данных
• Шаблоны
• Обработка событий
• Двусторонняя привязка
• Вычисляемые свойства
• Привязка классов
• Привязка к стилям
• Наблюдаемые свойства
• Работа с объектом Vue
• refs и управление html-элементами
• Жизненный цикл Vue.

Подробнее о курсе Vue.js →

Курс «Vue.js от Школа Программистов “ПРОК”»»

Цена: 14 000 руб.

Продолжительность: 5 недель

Перейти на официальный сайт →

Формат: Онлайн-занятия

Сертификат

Чему научитесь:

• Работа с инструментами Vue-cli, Webpack
• Vue – Основы работы с фреймворком
• Рендер-функции, анимации, продвинутые компоненты высшего порядка
• Серверный рендеринг для SEO, Nuxt-фреймворк.

Программа обучения:

• Ментор составляет программу под ваш уровень знаний.

Подробнее о курсе Vue.js →

Курс «VueJS от Coursera»»

Бесплатно

Продолжительность: 1.5 часа

Перейти на официальный сайт →

Формат: Видеоуроки

Сертификат

Чему научитесь:

• Изучите основы VueJS
• Напишите одностраничное веб-приложение с помощью VueJS.

Программа обучения:

• Введение и предварительный просмотр готового продукта
• Заложите строительные леса для веб-приложения Vue
• Построение выпадающего списка стран – 2 способа
• Реагировать на выбор страны и строить выпадающий список университетов
• Отображение информации об университете при выборе
• Условное применение стилей CSS
• Включите производственный режим.

Подробнее о курсе Vue.js →