17 курсов по Vue js доступных для прохождения в 2024 году

Курс для практикующих веб- и frontend-разработчиков. Расширьте свои компетенции, изучив трендовый фреймворк Vue.js

Вы с нуля научитесь разрабатывать полноценные сайты и веб-приложения на JS и изучите один из фреймворков – Vue, React или Angular. Станете ценным сотрудником для любой IT-компании, поймёте, как получить повышение, и сможете зарабатывать больше.

• #1 Зачем нужен Vue.js? - Vue.js: концепции
• #10 Криптономикон-1 - Vue.js: практика
• #11 Криптономикон-2 - Vue.js: практика
• #12 Реализация реактивности - Vue.js: нюансы
• #13 Компоненты - Vue.js: концепции
• #14 Криптономикон-3: vue-cli и tailwind
• #15 Криптономикон-4 - Самостоятельная работа (валидации)
• #16 Криптономикон-5: Работа со списком - Vue.js: практика
• #17 Криптономикон: рефакторинг - Vue.js: практика
• #18 Криптономикон: рефакторинг - Vue.js: практика
• #19 Криптономикон: ещё раз о рефакторинге - Vue.js: практика
• #2 Реактивность - Vue.js: концепции
• #20 YAGNI - Vue.js: практика
• #21 Криптономикон: улучшаем API - Vue.js: практика
• #22 Криптономикон: refs - Vue.js: практика
• #23 nextTick - Vue.js: нюансы
• #24 Криптономикон: компоненты - Vue.js: практика
• #25 Нативные события - Vue.js: нюансы
• #26 Всплытие событий - Vue.js: нюансы
• #27 Знакомство со слотами - Vue.js: практика
• #28 Попап и scoped slots - Vue.js: практика
• #29 Попап и промисы - Vue.js: практика
• #3 Двустороннее связывание - Vue.js: концепции
• #4 Как во Vue.js использовать Х - Vue.js: нюансы
• #5 Знакомство - Vue.js: практика
• #6 Декларативность - Vue.js: концепции
• #7 «Теория ограничений» - Vue.js
• #8 Бизнес логика или детали реализации? - Vue.js: концепции
• #9 Учимся учиться - Vue.js: практика

Студенты, изучающие тему «Vue JS«, также изучают

• Vuex
• Laravel
• JavaScript
• React
• Firebase
• HTML
• js
• PHP
• Js
• Angular
• Веб-разработка
• TypeScript
• Верстка веб-страниц
• Django
• CSS
• Комплексная веб-разработка
• Express Framework
• React Hooks

 

Vue.js 2.5 Создаем сайт на Vue.JS с Firebase, Vuex и Router

Узнайте, как создавать динамические веб-сайты на Vue.JS с Firebase 5 (включая Авторизацию), Vuex & Vue Router - 2018

 

Vue JS и Vuex - пишем реальный проект с нуля

Улучшите свои знания Vue JS и Vuex написав вместе со мной реальный проект от начала и до конца

 

Vue.js с нуля на реальном проекте

Вы изучите Vue.js, разработав свое приложение-чат

 

Игра на Vue.js

Создадим реальную игру на Vue.js от начала разработки интерфейса до реализации алгоритмов на JavaScript.

 

Vue - The Complete Guide (w/ Router, Vuex, Composition API)

Vue.js is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!

 

Nuxt.js - Vue.js on Steroids

Build highly engaging Vue JS apps with Nuxt.js. Nuxt adds easy server-side-rendering and a folder-based config approach.

 

Build Web Apps with Vue JS 3 & Firebase

Learn Vue JS 3 & Firebase by creating & deploying dynamic web apps (including Authentication).

 

React JS, Angular & Vue JS - Quickstart & Comparison

Angular (Angular 2+), React or Vue? Get a Crash Course on each of them and a detailed comparison!

 

Vue JS Essentials with Vuex and Vue Router

Have limited time to learn Vue, Vuex, and Vue Router? Take this course and learn Vue in 11 hours!

 

Vue JS 2: From Beginner to Professional (includes Vuex)

 

Vue.js: Full Stack App With Firebase, Vuex & Router [2020]

 

Vue.js Jump-start with Nuxt.js & Firebase

 

Vue JS 2.0 - Mastering Web Apps

Create the VueJS 2.0 apps you always wanted. Build 5 apps, learn development secrets, VueRouter, Vuex, & more!

 

Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase)

Use Quasar V1, Vue JS 2, Vuex & Firebase to build a Cross Platform App for Web, iOS, Android, Mac & Windows

 

Vue.js Essentials - 3 Course Bundle

Learn and master VueJS by building 3 professional, real world web application using Vue!

 

Vue JS 2: From Beginner to Professional (includes Vuex)

Learn Vue JS, and become a VueJS professional. Build complex SPAs with Vue.js, a simple and popular JavaScript framework

 

Laravel API Development & Vue JS SPA from Scratch

Learn how to develop a robust API with Laravel and a Single-Page Application in Vue JS from Scratch

 

Complete Vuejs Course: Vue.js + Nuxt.js + PHP + Express.js

VueJS, Command Line, Babel, NPM, Webpack, Vue JS CLI, Vue.js Router, VueX, Axios, iView, Express.js, Nuxt.js

 

Full-Stack Vue with GraphQL - The Ultimate Guide

Build a complete Pinterest-inspired full-stack app from scratch with Vue, GraphQL, Apollo 2, Vuex, and Vuetify

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

Данный видео курс состоит из 6 уроков, на которых учащиеся ознакомятся с новым JavaScript-фреймворком - Vue.js - и изучат основные принципы работы с ним. После прохождения курса вы сможете создавать собственные веб-приложения, используя шаблоны и маршрутизацию страниц.

Чему вы научитесь с помощью данного видео курса:

• Создавать анимации и переходы на странице, используя классы
• Понимать и применять компоненты, как основные элементы фреймворка Vue.js
• Работать с формами и данными
• Использовать этапы жизненного цикла приложения для пошагового разбора прохождения событий
• Создавать готовые веб-приложения, используя маршруты и переадресации

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

• Неделя 1 — Workflow

— Знакомимся с наставником и группой. — При помощи webpack-сборки верстаем выбранный макет выпускного проекта. — Размещаем результат на Github и сдаём на проверку наставнику.

• Открытие курса

Открытие курса

1 урок (01:09:37)

• Как проходит обучение(01:09:37)

• Основные возможности

Модуль

24 урока (01:42:43)

• Теория(04:49)
• Hello World(06:20)
• Обработка событий(02:38)
• Обработка нескольких событий(01:19)
• Динамические значения(01:30)
• Знакомство с директивами(05:40)
• Сокращенные записи директив(00:37)
• Методы с параметрами(01:36)
• Модификаторы событий(08:52)
• Вычисляемые свойства(10:50)
• Вотчеры(06:02)
• Работа с классами(03:37)
• Работа с CSS свойствами(02:49)
• Обращение к DOM элементам(03:50)
• Условный рендеринг(04:46)
• Рендеринг списков(05:12)
• Создание компонента(04:16)
• Локальные компоненты(02:44)
• Реактивность данных(04:35)
• Свойства компонента(03:52)
• Слоты(04:37)
• Слоты с областью видимости(04:52)
• Пользовательские события(04:27)
• Телепорты(02:53)

• Однофайловые компоненты

Модуль

11 уроков (55:27)

• Установка проекта. VUE-CLI(09:22)
• Однофайловый компонент(03:18)
• Работа со стилями(07:02)
• Передача атрибутов и обработчиков(02:53)
• Отдельные файлы(01:26)
• Валидация свойств компонента(07:35)
• Валидация пользовательских событий(02:01)
• Двусторонняя связь данных(04:11)
• Пользовательский v-model(05:51)
• Хуки жизненного цикла(07:08)
• Примеси(04:40)

• NPM

Модуль

11 уроков (35:05)

• Что такое npm?(05:50)

Бесплатный урок

• Установка и обновление npm(02:33)

Бесплатный урок

• Справка по работе с npm(01:28)

Бесплатный урок

• Поиск и установка пакетов(04:24)
• Зависимости пакета(02:09)
• Файл манифест package.json(03:02)
• Удаление и обновление пакетов(03:02)
• dependencies и devDependencies(01:51)
• Webpack и npx(04:04)
• npm-скрипты(04:02)
• npm, git и github(02:40)

• Yarn

Модуль

1 урок (07:07)

• Yarn(07:07)

• Основы работы

Модуль

11 уроков (35:56)

• Теория(01:09)
• Минимальный конфиг и запуск(04:41)
• Именование файлов(02:34)
• Лоадеры(04:28)
• Dev-server(02:43)
• Плагины(02:34)
• Поиск модулей(03:18)
• Сорсмапы(03:17)
• Дев и прод(02:42)
• Типы модулей(03:00)
• Минимальная сборка(05:30)

• Обзор конфигурации

Модуль

5 уроков (12:53)

• Введение(01:26)
• Установка и запуск(03:10)
• Исправление ошибок(02:04)
• Конфигурация(05:21)
• Формат вывода(00:52)

• Figma для верстальщика

Модуль

2 урока (06:09)

• Figma. Интерфейс(04:37)
• Figma. Организация проектов(01:32)

• Flexbox

Модуль

13 уроков (26:26)

• Введение(00:45)

Бесплатный урок

• Флекс-контейнер(01:43)

Бесплатный урок

• Выравнивание по главной оси(01:37)

Бесплатный урок

• Выравнивание по поперечной оси(01:50)
• Выравнивание отдельного элемента(01:09)
• Флекс-элемент – контейнер(00:53)
• Направление осей(03:18)
• Многострочный контейнер(02:54)
• Выравнивание многострочного контента(01:25)
• Пропорции(02:46)
• Пропорции при сжатии(01:24)
• Базовый размер(04:02)
• Порядок элементов(02:40)

• GIT

Модуль

12 уроков (01:28:36)

• Введение(07:03)

Бесплатный урок

• Начинаем работать с Git(03:01)

Бесплатный урок

• Создание нового репозитория(01:09)

Бесплатный урок

• Добавление файлов в индекс (область слежения) Git(06:49)

Бесплатный урок

• Создание коммита(07:17)
• Навигация по коммитам. Отмена изменений(12:10)
• Типичный цикл работы с Git(03:34)
• Ветвления в Git(11:27)
• Конфликты при слиянии веток(06:06)
• Временное (без коммита) сохранение данных(05:25)
• Работа с удалёнными репозиториями(20:04)
• Использование GitHub Pages для хостинга проектов(04:31)

• Воркшоп #1

Воркшоп

5 уроков (20:58)

• Старт проекта(05:24)
• Компонент хедера(04:13)
• Компонент иконок(05:06)
• Вывод списка компонентов(02:56)
• Компонент toggler(03:19)

• Неделя 2 — Vue.js

— Делаем верстку адаптивной. — Реализуем блок «Скиллы» на Vue.js. — Реализуем блок «Мои проекты» на Vue.js. — Реализуем блок «Слайдер для отзывов» с помощью Vue.js плагина.

• Storybook

Модуль

14 уроков (40:11)

• Установка(01:56)
• Первая история(04:35)
• Подключение компонента(01:24)
• Расширение конфига(04:26)
• Общие стили(02:08)
• Стори для компонента(05:23)
• CDD(04:16)
• Создание компонента(02:28)
• Применение компонента(02:29)
• Логирование событий(03:29)
• Аддон Backgrounds(01:41)
• Аддон Knobs(02:28)
• Аддон Source(02:17)
• Заключение(01:11)

• JavaScript — ES6

Модуль

5 уроков (01:11:59)

• Строковая интерполяция(07:39)

Бесплатный урок

• Упрощение описания методов(13:35)
• Значения по умолчанию(30:08)
• Деструктурирующее присваивание: Объекты(07:30)
• Новые возможности и старые браузеры(13:07)

• Асинхронность в JavaScript

Модуль

4 урока (01:55:02)

• Таймеры(23:44)
• Загрузка картинок(22:21)
• Промисы(36:29)
• AJAX(32:28)

• Библиотека для запросов

Модуль

8 уроков (18:28)

• Введение(02:23)
• Отправляем запрос(02:12)
• Обзор конфигурации(04:30)
• Тело запроса(01:43)
• Настройки по умолчанию(01:38)
• Перехватчики(02:11)
• Сервисы(02:33)
• async-await(01:18)

• js. Виджеты

Воркшоп

16 уроков (59:58)

• Компонент Skills. Подготовка(02:42)
• Компонент Skills. Вывод разметки(01:22)
• Компонент Skills. Вынесение компонентов(04:07)
• Компонент Skills. Вывод данных(07:36)
• Компонент Skills. Функционал(04:07)
• Слайдер. Подготовка(04:44)
• Слайдер. Подключение картинок(04:28)
• Слайдер. Вывод данных ч.1(02:14)
• Слайдер. Вывод данных ч.2(05:27)
• Слайдер. Обработчик клика(05:37)
• Слайдер. Переключение слайдов(01:58)
• Слайдер. Порядок слайдов(01:48)
• Слайдер. Круговое переключение(02:11)
• Слайдер. Теги и индекс(02:41)
• Слайдер. Неограниченное количество слайдов(03:11)
• Слайдер отзывов. Swiper(05:45)

• Неделя 3 — Нативный JavaScript

— Верстаем админку. — Изучаем Storybook и применяем в своём проекте. — Осуществляем необходимую обработку (валидацию) форм проекта.

• js. Работа в среде приложения

Модуль

15 уроков (01:04:44)

• Установка проекта(09:28)

Бесплатный урок

• Настройки dev-server(02:14)

Бесплатный урок

• Тег template(00:49)
• Тег script(03:05)
• Стили компонента(04:25)
• $attrs и $listeners(04:45)
• Передача данных в модель(05:18)
• Отдельные файлы(00:59)
• Свойства компонента(05:20)
• Примеси(05:44)
• Жизненные циклы компонента(05:21)
• Слоты(02:29)
• Слоты c областью переменных(04:40)
• Пользовательские события(04:43)
• Шина событий(05:24)

• js. Сборка страницы

Воркшоп

17 уроков (57:53)

• Хедер(03:11)
• Вставка хедера(02:05)
• Блок с юзером(02:45)
• Навигация(03:21)
• Блок с заголовком(02:12)
• Добавление нового свойства(02:51)
• Компонент skill(03:18)
• Skill. Переключение режимов(07:09)
• Доработка компонента категории(03:40)
• Состояние пустой категории(02:52)
• Вывод данных(04:21)
• Отображение пустой категории(02:13)
• Добавление категории в storybook(02:03)
• Презентеры и контейнеры(04:25)
• Проброс событий(02:20)
• Создание контролла(06:31)
• Добавление v-model(02:36)

• Вопрос-ответ

Вебинар

26.08.2021 00:00

— Практический вебинар с преподавателем.

• Неделя 4 — Vue.js, SPA

— Реализуем SPA в админ-панели. — Изучаем работу с данными через хранилище приложения — Используем ajax для связи с api, настраиваем взаимодействия клиент-сервер.

• js. Написание приложения

Модуль

16 уроков (01:40:20)

• Введение(01:44)

Бесплатный урок

• Настройка проекта(01:35)

Бесплатный урок

• Верстка проекта(10:31)
• Добавление заданий(10:19)
• Формирование списка(03:51)
• Подсчет элементов(01:31)
• Удаление элементов(04:10)
• Изменение свойства в элементе(06:59)
• Фильтрация элементов Подготовка(05:33)
• Фильтрация элементов Реализация(05:10)
• Валидация(09:30)
• Роутер Подключение(06:29)
• Роутинг Навигация(05:56)
• Хранилище Подключение(06:36)
• Хранилище Состояние(06:45)
• Хранилище Методы(13:41)

• js. Composition API

Модуль

20 уроков (36:49)

• Введение(01:29)

Бесплатный урок

• Общий пример(03:57)

Бесплатный урок

• Функция композиции(01:51)

Бесплатный урок

• Функция reactive(00:55)
• Функция toRef(01:35)
• Функция toRefs(00:58)
• Computed свойства(00:56)
• Функция watch(01:41)
• Функция watchEffect(03:14)
• Функция readonly(00:40)
• Функции-проверки(02:30)
• Функция unref(01:27)
• Хуки жизненного цикла(00:58)
• Пример. Обзор проекта(00:53)
• Пример. Функционал подгрузки(01:20)
• Пример. Категории(02:20)
• Пример. Начальная фильтрация(02:46)
• Пример. Переключение фильтра(02:11)
• Пример. Остальные функции фильтрации(02:03)
• Пример. Метод сортировки(03:05)

• Работа с api для проекта портфолио

Модуль

6 уроков (40:26)

• Логин(10:47)
• Авторизация JWT(05:30)
• Передача токена(03:25)
• Получение и обновление категорий(06:31)
• Добавление скилла(09:15)
• Запись токена в localStorage(04:58)

• js. Работа с сервером

Воркшоп

28 уроков (01:41:40)

• Роутер. Настройка(05:47)
• Подключение страниц(04:33)
• Логин. Валидация(08:04)
• Логин. Запрос(06:54)
• Доработка формы(02:20)
• Вывод ошибки(01:30)
• Настройка запросов(03:18)
• async + await(04:32)
• Стор. Подключение(02:05)
• Вызов экшена(05:08)
• Добавление категорий(03:50)
• Получение категорий(06:09)
• Перерисовка категорий(03:46)
• Прелоадер(02:08)
• Скиллы. Подготовка событий и экшенов(04:40)
• Добавление скилла. Валидация(02:20)
• Добавление скилла. Запрос(03:18)
• Добавление скилла. Мутация(03:59)
• Сброс данных(01:13)
• Удаление скилла. Мутация(02:11)
• Удаление скилла. Запрос(03:29)
• Изменение скилла. Мутация(03:16)
• Изменение скилла. Запрос(03:08)
• Сброс плашки скилла(01:45)
• Тултипы. Верстка(03:37)
• Тултипы. Отображение(04:36)
• Тултипы. Закрытие(03:04)
• Заключение(01:00)

• Неделя 5 — Практика

— Выводим сохраненные данные из админ-панели на лендинг. — Тестируем компоненты. — Групповая работа над проектом с наставником.

• Тестирование JS-кода

Модуль

4 урока (50:55)

• Введение(16:05)
• Jest(15:47)
• Польза тестов(09:01)
• Coverage(10:02)

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

Модуль

13 уроков (47:47)

• Настройка пакетов(04:39)
• Обертка компонента(04:13)
• Что тестировать(02:48)
• Первый тест(05:25)
• Проверка эмит-события(03:44)
• Передача свойств(02:58)
• Работа с элементами форм(05:42)
• Общие установки(01:15)
• Моки(05:04)
• Подключение библиотек(02:32)
• Тестирование экшена(03:26)
• Тестирование стора(02:53)
• Тестирование снимками(03:08)

• Анимации во Vue.js

Модуль

12 уроков (34:39)

• Введение(00:59)

Бесплатный урок

• CSS-классы анимаций(03:24)

Бесплатный урок

• Именование анимаций(00:54)
• Динамические компоненты(02:50)
• Замена компонентов(02:12)
• Анимирование смены состояния(03:14)
• Хуки анимации(05:16)
• Анимация по загрузке(00:37)
• Практика. Демо(00:38)
• Практика. Верстка(03:00)
• Практика. Реализация(01:29)
• Практика. Анимации(10:06)

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

Воркшоп

11 уроков (40:11)

• Загрузка картинки. Подготовка(02:08)
• Отображение картинки(04:18)
• Загрузка перетягиванием(05:19)
• Передача файла на сервер(03:54)
• Вывод картинки(01:33)
• Обновление токена(05:50)
• Определение публичного роута(04:02)
• Проверка пользователя(05:19)
• Доработка логина(01:49)
• Вывод данных(02:26)
• Разделение кода(03:33)

• Неделя 6 — Завершение работы над проектом

— Дорабатываем проект. — Сдаём проект на проверку наставникам. — Выставление оценок в дипломы.

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

Модуль

5 уроков (01:52:46)

• Как получить работу в IT? Поиск, собеседование и испытательный срок(42:21)

Бесплатный урок

• Как найти удаленную работу и фриланс-заказы?(20:12)

Бесплатный урок

• Первая работа в IT — как себя вести? Стажировки, официальное трудоустройство и работа «за еду»(14:11)
• Как пройти испытательный срок?(27:10)
• Как подготовиться к собеседованию в компании уровня FAANG(08:52)

то даст вам этот курс

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

Для кого этот курс:

• Для JavaScript-разработчиков с навыками HTML/CSS.Вы сможете использовать решения, ускоряющие и упрощающие процесс разработки.
• Для backend-разработчиков, желающих стать Fullstack.js идеально подходит для тех, кто хочет быстро пополнить пул скиллов работой с фронтендом.
• Для начинающих Vue-разработчиков.Курс поможет расширить и углубить навыки работы с фреймворком, чтобы выделиться среди других соискателей.

Вы научитесь:

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

Также вы узнаете, как работает Webpack и Babel, освоите различные паттерны проектирования и научитесь их применять в для построения сложных приложений на Vue.

 

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

В процессе обучения вы получите комплексные знания и навыки.

Модуль 1 Основы Vue

Тема 1. Введение в курс, современная веб-разработка

Тема 2. Vue, введение

Тема 3. Шаблоны

Тема 4. Использование CSS во Vue

Тема 5. Компоненты props и события

Тема 6. Формы, слоты, фильтры, директивы

Тема 7. Реактивные данные, MVVM и особенности Vue 3

Тема 8. Vue3 работа с библиотеками

Модуль 2 Уверенная разработка на Vue

Тема 9. Vue router

Тема 10. Анимация Vue

Тема 11. Vuex работа с данными

Тема 12. Тестирование Vue приложений

Тема 13. Организация кода и паттерны Vue

Тема 14. Продвинутый JavaScript

Тема 15. QA / Code review

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

Тема 16. Web components + Vue

Тема 17. Интеграции Vue: GraphQL, FireBase, OAuth 2.0

Тема 18. SSR с Nuxt

Тема 19. Typescript

Тема 20. Консультация по дипломному проекту

Тема 21. Десктоп приложения с Electron

Тема 22. Функциональное программирование и продвинутый Vue

Тема 23. Инструменты современной разработки

Модуль 4 Проектная работа

Тема 24. Выбор темы и организация проектной работы

Тема 25. Консультация по проектам и домашним заданиям

Тема 26. Защита проектных работ

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

Требования для начала курса:

• Знание JS ES6.

Программное обеспечение, необходимое для работы с проектом:

• Git и Github
• js
• Docker

Раздел 1

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

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

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

Раздел 2

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

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

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

Раздел 3

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

В разделе 3 мы углубимся в работу фреймворка Vue.js, добавим автоматические лейауты и маршрутизатор.

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

Раздел 4

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

В разделе 4 мы рассмотрим, как подключить хранилище Vuex к нашему приложению и как его использовать.

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

Раздел 5

Работа с HTTP

В разделе 5 мы избавимся от тестовых данных и реализуем взаимодействие с сервером.

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

Раздел 6

Анимации Vue.js

В разделе 6 мы реализуем необходимые анимации для нашего проекта.

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

Раздел 7

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

В разделе 7 мы добавим модульное тестирование для компонентов.

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

Раздел 8

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

В разделе 8 мы разберём продвинутые техники Vue.

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

Раздел 9

Обзор Nuxt.js

В разделе 9 сделаем обзор Nuxt.js

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

— овладей Vue.js обучаясь всего по 2 часа в день в течение 1 месяца
— с любого уровеня владения JavaScript
— самая актуальная информация по 3-й версии Vue.js

Vue - это JS фреймворк для создания реактивных пользовательских интерфейсов.

Он отличается от других фреймворков своей простотой и эффективностью.

 

Об этом говорит наибольшее количество звезд на github.com относительно Angular и React. Это как приз зрительских симпатий среди разработчиков

 

ПОДРОБНАЯ ПРОГРАММА КУРСА

1 НЕДЕЛЯ

Введение

Основы Vue

Что еще есть во Vue

Как работает Vue

2 НЕДЕЛЯ

Работа с Vue CLI

Все о компонентах

Работа с элементами формы

Vue и работа с HTTP

3 НЕДЕЛЯ

Миксины, директивы и плагины

Vue Router

Vuex - Работа с данными

Работа с Composition API

4 НЕДЕЛЯ

Vue на TypeScript

Практика. Создаем приложение

Курс посвящён разработке на Vue 3: от использования его как небольшой библиотеки до создания современного SPA приложения.

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

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

БЛОК 1

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

В начале курса мы познакомимся с Vue.js как небольшой библиотекой, изучим её основными возможности и их применение в компонентном подходе к разработке приложений.

• Основы Vue.js
  • Синтаксис шаблонов
  • Реактивность вычисляемые свойства, отслеживание
  • Работа с DOM событиями, атрибутами, формами
  • Хуки жизненного цикла
• Компоненты во Vue.js
  • Компонентный подход
  • Создание компонентов
  • Параметры и события компонентов
  • Слоты

БЛОК 2

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

После изучения основ перейдём к современному подходу к разработке JavaScript приложений и научимся создавать одностраничные приложения на Vue.js.

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

БЛОК 3

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

Продолжим изучать возможности Vue.js и подходы к разработке компонентов. Разберёмся, как работает реактивность, рендеринг и какие есть ограничения при работе на Vue.

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

БЛОК 4

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

Рассмотрим другие варианты взаимодействия компонентов приложения, их применение, сильные и слабые стороны. Научимся расширять Vue.js. Изучим Composition API - новый подход определения компонентов во Vue 3.

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

БЛОК 5

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

Познакомимся с глобальным хранилищем Vuex. Рассмотрим различные архитектурные аспекты разработки проекта.

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

БЛОК 6

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

В конце курса поговорим о проблемах SPA приложений и способы их решения: сравним prerendering и server-side rendering.

А после обсудим другие темы, по которым остались вопросы за время курса.

Результат обучения

1. Вы хорошо понимаете возможности Vue.js и основных библиотек его экосистемы.
2. Вы умеете разрабатывать компоненты на Vue.js и использовать их как в существующих проектах, так и разрабатывать SPA приложения на Vue.js.
3. Вы используете различные инструменты разработки современных веб-приложений.
4. Вы знакомы с Nuxt.js и серверным рендерингом на Vue.js.
5. Вы знаете в каком направлении развиваться дальше.

Курсовой проект

Сервис для «митапов» (собраний, конференций)

1. Одностраничное приложение: роутинг, динамическая подгрузка страниц.
2. Вывод в виде календаря или списка.
3. Работа с формами: компоненты форм, генерация.
4. Сетевые запросы, HTTP API, аутентификация.
5. Современная архитектура.

The Vue.js 3 Masterclass

watch time

5 hrs | 126 lessons

date

More lessons coming soon

Learn how to build a real-world application with Vue.js 3 in the supercharged and remastered Vue.js Masterclass.

 

FREE

Vue.js 3 Fundamentals

watch time

58 min | 11 lessons

Learn the fundamental concepts and get up and running with Vue.js 3. Perfect if you haven’t touched Vue before, or you’re just getting started!

 

FREE

Reusable Vue.js Components with Slots

watch time

44 min | 10 lessons

Learn how to master slots and scoped slots, to build flexible and reusable vue.js components.

 

ADVANCED

 

Vue-Apollo GraphQL Fundamentals

watch time

45 min | 10 lessons

Learn how to consume and use GraphQL APIs in your Vue.js apps with Vue-Apollo.

 

IN PROGRESS

What is new in Vue 3

watch time

1 hr | 15 lessons

date

More lessons coming soon

Take a deep dive into the new and exciting features of Vue 3. Learn about Portals, Suspense, Composition API, Fragments, and much much more.

 

FREE

Vue Router 4 for Everyone

watch time

3 hrs | 28 lessons

Learn how to build powerful Single Page Applications in Vue 3 with the Vue Router 4.

 

COMING SOON

Vue 3 Composition API

date

Coming soon

Leverage the power of the new Composition API and build reusable features (composables) for scalable Vue applications.

 

Storybook with Vue.js

watch time

1 hr | 16 lessons

Document and showcase Vue.js components in an elegant UI with Storybook. Perfect for multi-disciplinary teams!

 

Functional Components

watch time

31 min | 8 lessons

Learn all you need to know to take full advantage of functional components in your Vue.js applications.

 

ADVANCED

FREE

Internationalization with vue-i18n

watch time

56 min | 12 lessons

Master internationalization and learn how to create multilingual websites and vue.js applications with vue-i18n.

 

GraphQL Fundamentals

watch time

23 min | 5 lessons

GraphQL is a fantastic new API standard that provides a more efficient, powerful, and flexible alternative to REST. In this course, you’ll lea…

 

FREE

Vue Router for Everyone

watch time

1 hr | 17 lessons

Learn how to build powerful Single Page Applications in Vue with the Vue Router.

 

Modern JavaScript: ES6 and beyond!

watch time

2 hrs | 25 lessons

Level up your JavaScript skills by mastering the modern and essential JavaScript techniques from ES6, ES7, and ES8.

 

IN PROGRESS

Web Accessibility Fundamentals

watch time

26 min | 8 lessons

date

More lessons coming soon

Learn how to make the web accessible for everyone, despite their hardware, software, language, location, or ability.

 

Single File Components

watch time

37 min | 8 lessons

Embrace the full power of JavaScript bundlers and Vue.js by learning how to create and manage Single File Components.

 

Testing Vue.js Components

watch time

1 hr | 11 lessons

Learn everything you need to know to test your Vue.js components like a pro!

 

ADVANCED

FREE

Vue.js Components Fundamentals

watch time

53 min | 11 lessons

Components are the puzzle pieces of a Vue.js website. Learn the fundamental and important concept of Vue.js components in this course.

 

Static Site Generation with Nuxt.js

watch time

11 min | 4 lessons

Learn how to generate static websites (pre-rendering) with Nuxt.js to improve both performance and SEO while eliminating hosting costs.

 

ADVANCED

 

Async Data with Nuxt.js

watch time

23 min | 7 lessons

Learn how to manage asynchronous data and render your application server-side with Nuxt.js

 

Test with Jest

watch time

52 min | 13 lessons

Jest is an industry leading test suite for JavaScript used by big and small projects around the globe. Get up and running with Jest in this co…

 

FREE

Nuxt.js Fundamentals

watch time

35 min | 14 lessons

Learn the fundamentals of Nuxt.js in this course that we created together with the founders of Nuxt. The course covers what you need to know f…

 

Custom Vue Directives

watch time

14 min | 10 lessons

Learn how to create custom Vue.js directives. Directives are special HTML attributes that allow us to do powerful DOM manipulations, like v-if…

 

ADVANCED

FREE

JavaScript Testing Fundamentals

watch time

22 min | 6 lessons

This is our introductory course to JavaScript testing. We cover why testing is important, what you should test and the testing jargon you need…

 

Dynamic Forms with Vue.js

watch time

58 min | 13 lessons

Learn how to create dynamic forms that consist of multiple steps with Vue.js

 

ADVANCED

 

Vue.js Form Validation

watch time

34 min | 12 lessons

Learn how to validate your forms with Vue.js and Vuelidate like a pro.

 

FREE

Vue.js Fundamentals

watch time

27 min | 10 lessons

This Vue.js course will teach you and get you up and running with the fundamental concepts of Vue.js. Perfect if you haven’t touched Vue befor…

 

Vue.js + Firebase Authentication

watch time

32 min | 8 lessons

This Vue.js course will teach you how to use Firebase Authentication in your vue.js applications and allow your users to authenticate with the…

 

Vue.js + Firebase Realtime Database

watch time

34 min | 8 lessons

This Vue.js course will teach you how to use Firebase Realtime Database in your vue.js applications. The example app is a realtime chat room,…

 

The Vue.js Master Class

watch time

7 hrs | 105 lessons

In our Master Class you’ll learn Vue.js by building a real-world application. Together we’ll create a complete forum from scratch using exci…

 

FREE

Vuex for Everyone

watch time

1 hr | 16 lessons

This Vue.js course is based on the official Vuex example. We’ll create a shopping cart with Vue and progressively discover and learn about Vue…

 

ADVANCED

FREE

Vue.js 3 Components Fundamentals

watch time

1 hr | 11 lessons

Components are the puzzle pieces of a Vue.js website. Learn the fundamental and important concept of Vue.js components in this course.

 

Vue 3 Single File Components

watch time

48 min | 8 lessons

Embrace the full power of JavaScript bundlers and Vue.js by learning how to create and manage Single File Components.

• Основы
• Установка
• Введение
  • Что такое Vue.js?
  • Начало работы
  • Декларативная отрисовка
  • Условия и циклы
  • Работа с пользовательским вводом
  • Разбиение приложения на компоненты
    • Отношение к пользовательским элементам Web Components
  • Готовы к большему?
• Экземпляр Vue
• Синтаксис шаблонов
• Вычисляемые свойства и слежение
• Работа с классами и стилями
• Условная отрисовка
• Отрисовка списков
• Обработка событий
• Работа с формами
• Основы компонентов
• Продвинутые компоненты
• Регистрация компонентов
• Входные параметры
• Пользовательские события
• Слоты
• Динамические и асинхронные компоненты
• Обработка крайних случаев
• Переходы и анимации
• Анимирование списков и появления/исчезновения
• Анимирование переходов между состояниями
• Переиспользование и композиция
• Примеси
• Пользовательские директивы
• Render-функции и JSX
• Плагины
• Фильтры
• Инструментарий
• Однофайловые компоненты
• Тестирование
• Поддержка TypeScript
• Публикация на production
• Масштабирование
• Роутинг
• Управление состоянием приложения
• Отрисовка на стороне сервера
• Безопасность
• Продвинутые темы
• Подробно о реактивности
• Вопросы миграции
• Миграция с Vue 1.x
• Миграция с Vue Router 0.7.x
• Миграция с Vuex 0.6.x на 1.0
• Мета
• Сравнение с другими фреймворками
• Присоединяйтесь к сообществу Vue.js!
• Познакомьтесь с командой

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

#1 Видеоуроки ~50 м.

Основы Options API

Основные моменты Vue.js, которые применим в первом же приложении и начнем двигаться дальше!

 

#2 Видеоуроки ~1 ч. 20 м.

Приложение с заметками

Напишем приложение с заметками, где применим все знания из «Основы vue.js» и начнем двигаться дальше!

 

#3 Видеоуроки ~1 ч.

Основы VUE CLI

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

 

#4 Видеоуроки ~40 м.

Vue Router

Научимся строить маршруты и перерисовывать страницы в зависимости от пути

 

#1 Видеоуроки ~1 ч. 30 м.

Vuex

Для быстрого и удобного взаимодействия мы научимся хранить данные внутри приложения при помощи VUEX

 

#2 Видеоуроки ~2 ч.

Webpack в связке в vue.js

В этом модуле мы напишем универсальную сборку на Webpack`е заточенную под vue.
Эту сборку точно также можно будет переиспользовать в любых проектах.

Далее у вас будет выбор - чем именно собирать все последующие проекты это будет webpack или vue cli

 

#3 Видеоуроки 30 м.

Vue.js + Wepback для быстрой верстки

Научимся использовать vue в верстке и оптимизировать компоненты с VUEX. Что поможет сократить время написания кода и значительно повысит его качество

 

#4 Видеоуроки 30 м.

Формы, модальные окна и валидация

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

 

#5 Видеоуроки 50 м.

Приложение Shop

В этом приложении, как и во всех последующих, мы будем использовать vue-roter и vuex. Все продукты будут храниться в общем хранилище, а роутер будет обрабатывать все динамические маршруты

 

#6 Видеоуроки ~30 м.

REST API

REST – это архитектурный подход API, определяющий, как он должны выглядеть. На REST строится весь современный веб! Далее технлогия REST API будет использоваться во всех последующих приложениях

 

#7 Видеоуроки ~1 ч.

Приложение Users CRM

Познакомимся с REST API, а также пагинацией данных и сортировкой. Научимся забирать данные со стороннего API через axios и get/post запросы

 

#8 Видеоуроки 40 м.

Создание новостной ленты

Сделаем подгрузку содержимого, реализуем свое API. Научимся обновлять данные на фронте, меняя их на сервере, и следить за “свежестью” данных

 

#9 Видеоуроки ~40 м.

Приложение GitHub Finder

Сторонние API, на примере самого популярного - GitHub. В этом приложении научимся отправлять и получать данные от api.github, как и раньше - по REST API

 

#10 Видеоуроки ~3 ч. 15 м.

SSR Блог на nuxt.js ?

Современный блог на nuxt.js + vue.js с рендерингом и админкой, полным SEO и небольшой CRM системой внутри, которая будет показывать все комментарии с возможностью сменять статус «опубликован/не опубликован», а также удалять «спам»

 

#11 Видеоуроки ~30 м.

Дополнительный модуль

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

 

#12 Видеоуроки

Задачи с собеседований

Модуль с задачами с собеседований и их решением. Более 30 реальных вопросов и 10+ тестовых задач по Vue.js + js!

Цель курса

Рассмотреть решение главных задач, возникающих при создании Single Page Application, таких как построение архитектуры приложения, работа с пользователями и авторизационными токенами, server side rendering и т.п.

Для продуктивного участия желательно прохождение базового курса по Vue. Однако, если вы уже знакомы с основами работы с vuex, vue-router, axios или fetch, можно начинать с текущей ступени.

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

курс проводится первый раз, возможны перестановки тем по урокам

урок 1

• Анализ SPA после vue level 1
• Улучшение архитектуры приложения
• Обработка и красивый показ ошибок
• Нюансы работы с Vue Router
• Дочерние маршруты, хуки и события
• Meta-данные маршрутов

урок 2

• Работа с авторизацией в SPA
• Создание модуля vuex/user
• Взаимодействие с серверным API
• Авторизация и JWT-токены
• Создание закрытых страниц
• Проверка прав доступа

урок 3

• Улучшение тренировочного SPA
• Личный кабинет пользователя
• Изучение серверного API
• Оформление и история заказов
• Модуль отзывов на товары
• SPA и проблемы с SEO. Пререндеринг

урок 4

• Идеи server side rendering
• Сервер на node.js + express
• SSR шаг за шагом на простом примере
• Vue Server Renderer
• Client и server entries
• Настройка vue-cli и webpack

урок 5

• SSR в более сложном SPA
• Проблемы синглтонов из es-модулей
• Работа с роутером и хранилищем
• Настройка axios
• Модуль vuex для head-раздела
• Наполнение базового шаблона

урок 6

• Схемы дополнительной оптимизации
• Настройка кода ответа сервера
• Предзагрузка данных и состояния
• Кэширование запросов
• Кэширование страниц
• Разделение CSS (file, head style)

урок 7

• Альтернативная сборка проекта
• SSR и магические помощники
• Bundle Renderer, ServerPlugin, ClientPlugin
• Гидратация клиентской части

урок 8

• Доработка тренировочного SPA
• Подведение итогов
• Выборочный SSR для страниц
• Идеи SSR в не node-окружениях

Our latest courses are listed below.

If you’re getting started try our Beginner path - Vue 2 or Beginner path - Vue 3.

Unsure if you should learn Vue 2 or Vue 3? Read this blog post.

Once you’re passed the basics, head to our intermediate or advanced path.

Lessons coming soon
Lighting Fast Builds with Vite
Advanced
Learn about Vite, the lightning-fast and lean build tool and dev server, billed as the next generation of front end tooling. Taught by its creator, Evan You.

Notify Me When Available

Releasing New Lessons
Validating Vue 3 Forms
VUE 3
1 Lesson
02min
Intermediate
Learn how to validate any type and size of form in Vue 3 by leveraging the power of Vee-Validate.

Lessons coming soon
Querying with GraphQL
VUE 3
Intermediate
Use GraphQL to modernize how your Vue app queries, manipulates, and stores data.

Notify Me When Available

Releasing New Lessons
Progressive Web Apps w/ Vue 3
VUE 3
3 Lessons
10min
Intermediate
In this course, you’ll learn how to get started with building a web app that’s offline-ready with Vue 3 and Progressive Web Apps.

Free Lesson Inside
Unit Testing Vue 3
VUE 3
6 Lessons
43min
Beginner
Learn about the benefits of unit testing, and what you should and shouldn’t be testing in your Vue apps.

Releasing New Lessons
Vuex Fundamentals
VUEX 4
VUE 3
5 Lessons
41min
Beginner
Learn how state management with Vuex can handle your app’s data needs.

Releasing New Lessons
Real World Testing
VUE 3
3 Lessons
26min
Intermediate
Explore how to thoroughly test a production-level Vue app

Free Lesson Inside
Touring Vue Router
VUE 3
11 Lessons
01h 21min
Beginner
Explore how Vue Router gives your Vue 3 app the navigation features it needs to scale.

Free Lesson Inside
Vue 3 + Typescript
VUE 3
10 Lessons
56min
Advanced
With Vue 3’s enhanced TypeScript support, using it just got easier. Learn how to strengthen your Vue apps with this popular technology.

Free Lesson Inside
Real World Vue 3
VUE 3
8 Lessons
01h 08min
Beginner
Learn the fundamentals of building a production-level single page application with Vue 3.

Free Lesson Inside
From Vue 2 to Vue 3
VUE 3
6 Lessons
51min
Advanced
Bring yourself up to speed on new features and breaking changes when migrating from Vue 2 to Vue 3

Free Course
Intro to Vue 3
VUE 3
11 Lessons
57min
Beginner
Learn the fundamentals of Vue 3 in this course that starts with the very basics.

Free Lesson Inside
Vue 3 Deep Dive with Evan You
VUE 3
15 Lessons
03h 07min
Advanced
Understand Vue 3 from the inside out through the perspective of the creator himself, Evan You.

Free Lesson Inside
Vue 3 Forms
VUE 3
9 Lessons
01h 25min
Intermediate
Create simpler and more powerful reusable forms with Vue 3.

Free Lesson Inside
Build a Gmail Clone with Vue 3
VUE 3
16 Lessons
02h 01min
Advanced
Put theory into practice by building a feature-rich email app that makes use of the core new features of Vue 3.

Free Lesson Inside
Component Design Patterns
9 Lessons
40min
Advanced
Build your best components by understanding the best practices and pros and cons of various design patterns.

Free Lesson Inside
Vue 3 Reactivity
VUE 3
6 Lessons
01h 01min
Advanced
The way Vue 3 does reactivity is entirely different from Vue 2. Learn how it works under the hood throughout this advanced course.

Free Lesson Inside
Unit Testing Vue 2
VUE 2
6 Lessons
44min
Intermediate
Learn about the benefits of unit testing, and what you should and shouldn’t be testing in your Vue apps.

Free Lesson Inside
Vue 3 Composition API
VUE 3
11 Lessons
43min
Advanced
Learn Vue 3’s new Composition API, an alternative way to compose components for scalable Vue applications.

Free Lesson Inside
Animating Vue
9 Lessons
06h 03min
Intermediate
Bring your web interface to life and improve your user experience with Vue animations.

Free Lesson Inside
Beautify with Vuetify
9 Lessons
01h 27min
Intermediate
Learn how to create beautifully styled and structured web apps using Vuetify, a material design component framework.

Free Lesson Inside
Watch Us Build a Trello Clone
10 Lessons
02h 21min
Intermediate
Core team member Damian Dulisz joins Gregg Pollack to build a Trello clone in Vue.js together. We build the app using Vuex, local storage, the browser drag and drop API, and lots of component refactoring.

Free Lesson Inside
Token-Based Authentication
7 Lessons
51min
Intermediate
Learn how to control access to certain parts of your app by implementing user authentication with JWT.

Free Lesson Inside
Next-Level Vue 2
VUE 2
13 Lessons
01h 49min
Beginner
Learn more advanced real-world practices on routing, component loading, code reuse, and forms.

Free Lesson Inside
Mastering Vuex
VUE 2
7 Lessons
01h 27min
Beginner
Learn how to handle state in a production-level application with Vuex, Vue’s own state management pattern and library.

Free Lesson Inside
Scaling Vue with Nuxt.js
10 Lessons
01h 34min
Intermediate
Once you are comfortable with Vue, learning a framework like Nuxt.js allows you to create production-ready web apps which follow best practices.

Free Lesson Inside
Real World Vue 2
VUE 2
9 Lessons
01h 31min
Beginner
Past the basics, we’ll show you more techniques that are needed to ship Vue applications. Topics include Vue CLI, Vue Router, Single File Components, and API calls.

Free Lesson Inside
Advanced Components
12 Lessons
01h 48min
Advanced
Discover the full functionality of Vue components with Gregg Pollack & Evan You, the creator of Vue.

Free Course
Intro to Vue 2
VUE 2
11 Lessons
56min
Beginner
If you’re just getting started with Vue, here’s where to get going. We cover all the basics and give you challenges so you can learn by doing.

• js для начинающих / Урок #1 - Что такое Vue.js?
• Урок #2 - События, атрибуты и методы
• Урок #3 - Обработанные свойства
• Урок #4 - Условия, списки и циклы
• Урок #5 - Работа с фильтрами (filters)
• Урок #6 - Создание компонентов
• Урок #7 - Vue CLI и .vue файлы
• Урок #8 - Компоненты и «.vue» файл
• Урок #9 - Связь компонентов
• Урок #10 - Завершающий урок
•  

JavaScript. Level 8. Vue.js - an open source JavaScript framework for developing web applications

09.02.07 Информационные системы и программирование

Код курса: ВЬЮ

Vue.js – открытый фреймворк на JavaScript для разработки веб-приложений. В процессе обучения вы познакомитесь с возможностями данного JavaScript-фреймворка для создания SPA-приложений с использованием популярных веб-технологий: HTML, CSS.

Для реализации веб-интерфейса приходиться сталкиваться с довольно сложными задачами. Современная разработка требует быстрого создания веб-приложений с возможностью их расширения в будущем. Разработчики стремятся использовать различные JavaScript-фреймворки для реализации множества задач по созданию веб-интерфейса

Вы научитесь

• управлять состоянием приложения
• создавать реактивные веб-формы
• создавать собственные UI-компоненты
• работать с REST-запросами для обмена данными в веб-приложении по протоколу HTTP

Специалисты, обладающие этими знаниями и навыками, в настоящее время крайне востребованы.

Большинство выпускников наших курсов делают успешную карьеру и пользуются уважением работодателей.

 

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

Модуль 1. Основы Vue.js. Экземпляр и жизненный цикл Vue. (6 ак. ч.)

• Преимущества Vue.js, сравнение с другими JavaScript-фреймворками.
• Использование Virtual DOM для улучшения производительности приложения.
• Применение Vue.js для создания приложений в реактивном стиле.
• Установка Vue, обзор инструментов разработчика.
• Шаблоны проектирования: Model-View-Controller, Model-View-ViewModel.
• Корневой экземпляр Vue, свойства и методы экземпляра, жизненный цикл экземпляра.

Модуль 2. Представления. Создание и организация компонентов. (6 ак. ч.)

• Шаблоны Vue. Интерполяции и Директивы. Вычисляемые свойства.
• Управление состоянием приложения.
• Отслеживание событий приложения, методы-обработчики событий.
• Возможности по работе с css-классами и стилями.
• Связывание данных с элементами форм.
• Применение различных директив для создания форм.
• Основы компонентов. Создание и организация компонентов в приложении на Vue.js.

Модуль 3. Выполнение REST-запросов для обмена данными с сервером. (6 ак. ч.)

• Работа с API и тестирование веб-приложения.
• Использование дополнительных библиотек в приложении на Vuе.
• Использование библиотеки axios для выполнения REST-запросов и получения данных по протоколу HTTP в формате JSON.
• Тестирование веб-приложения на Vue.js, использование инструментов для отладки и тестирования приложений.

Модуль 4. Основы BootstrapVue. Использование BootstrapVue UI-компонентов для создания веб-форм приложения в реактивном стиле.  (6 ак. ч.)

• Введение в BootstrapVue. Преимущества использования BootstrapVue фреймворка для создания сложных веб-приложений в реактивном стиле.
• Установка BootstrapVue. Обзор UI-компонентов фреймворка BootstrapVue.
• Использование различных компонент BootstrapVue для создания веб-форм приложения и взаимодействие с API для обмена данными в формате JSON.