Vue.js — видеокурс

Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв'язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Легкість бібліотеки та функціонал фреймворку

Vue.js - це прогресивний JavaScript-фреймворк для створення UI та створення надшвидких, потужних, повністю адаптивних односторінкових веб-застосунків (Single Page Application), що стрімко набирає популярності серед розробників.

Vue.js є бібліотекою. Але завдяки екосистемі компонентів, що поетапно нарощується (від творців самого Vue), бібліотека масштабується до повнофункціонального надшвидкого, гнучкого, продуктивного фреймворка. Легко інтегрується з іншими проектами та бібліотеками.

Для кого цей курс

Frontend-розробники-початківці

Ви хочете пов'язати свою діяльність з розробкою сайтів і веб-додатків. Хочете одразу вивчити та почати використовувати сучасні технології

Діючі Frontend-розробники

Для вас важливо бути в тренді та користуватися тільки актуальними й затребуваними технологіями веб-розробки для досягнення максимальних заробітків

Фрілансери-практики

Ви дуже обмежені в часі й гостро потребуєте швидкого оволодіння новою перспективною технологією для того, щоб брати дорожчі замовлення

Переваги перед іншими JS-фреймворками

Функції Vue схожі з функціями аналогічних JS-фреймворків від Google (Angular) і Facebook (React), це і компоненти, і директиви, і властивості, і переходи, і анімація, і фільтри. Але є й суттєві принципові відмінності, які залишають конкурентів далеко позаду.

Vue створений значно пізніше за аналогічні фреймворки від Google (Angular) і Facebook (React), тому логічним чином врахував усі переваги та недоліки двох останніх.

Уже сьогодні профі веб-розробки дедалі частіше віддають перевагу простому, легкому, потужному і розширюваному Vue перед іншими популярними фреймворками. Кількість "зірок" на GitHub - яскравий тому доказ.

Станом на квітень 2018 року Vue майже втричі популярніший за Angular. Судячи з тенденцій, уже зовсім скоро Vue обжене за затребуваністю серед профі свого найближчого конкурента - React від Facebook.

Чому вам варто вивчити цей курс

Вичерпна теорія

У курсі розглядається вичерпна теорія з Vue, до якої зможете повертатися за потреби. Тут зібрано все, що тільки може знадобитися при розробці з Vue.

Море практики

У практичній частині курсу показано створення повністю робочого сучасного застосунку з нуля, що базується на найпередовіших технологіях. На основі цих складових можна створити додаток практично будь-якого функціоналу

Затребувана технологія

За підсумками курсу створюється Serverless Single Page Application на material design з Firebase - один із головних трендів 2019 року

Повне охоплення навичок

Авторизація, завантаження картинок, захист роутів, валідація полів, виведення повідомлень про помилки, поділ прав доступу, повністю адаптивний дизайн під будь-який пристрій

Результат практичної частини курсу

Додаток, розробка якого показана в практичній частині курсу, є функціональною дошкою оголошень.

Результат є наочним прикладом застосування ВСІХ актуальних технологій створення реактивних повністю адаптивних SPA та їхньої взаємодії. На основі цих складових можна створити додаток практично будь-якого функціоналу.

Додаток дає змогу користувачеві зареєструватися і виставляти свої оголошення з картинками, описом і назвою. Також можна редагувати і приймати заявки від будь-яких користувачів.

Основний блок курсу складається з двох об'ємних частин:

Частина 1. Теорія Vue.js (9 блоків, 87 уроків, 12 годин)

Блок 1. Знайомство з Vue

Цей блок є вступним. З нього ви дізнаєтеся, що таке технологія Vue.js, де її застосовують, чим вона краща чи гірша за інші технології, і чому варто вчити саме Vue. У рамках блоку ми напишемо зовсім невеликий застосунок, у якому ви побачите динаміку, яку можна створювати, використовуючи Vue.
— Что такое Vue.js
— Создание простого Vue-приложения

Блок 2. Основи Vue

Цей блок присвячений усім важливим вступним темам, які є у фреймворку. Ми розберемо найосновніші принципи Vue на практичних прикладах, і докладно розберемо синтаксис і принципи роботи фреймворку.
— Интерполяция
— Динамические атрибуты
— Вывод HTML-кода
— Добавление событий
— Передача параметров в метод
— Модификаторы событий
— Модификаторы событий клавиатуры
— Ярлыки для директив
— Модель для работы с формами
— Работа с CSS-классами
— Динамические стили
— Управление отображением элементов
— Директива v-show vs v-if
— Работа со списками
— Оптимизация приложения с computed
— Отслеживание изменений с watch
— Связывание разных приложений. Инстанс Vue
— Доступ к DOM-элементам
— Свойство template
— Жизненный цикл

Блок 3. Vue CLI&Webpack

У цьому блоці ми розберемо що таке за інструмент Vue CLI. Ми встановимо його на комп'ютер і за допомогою нього згенеруємо новий проєкт на Vue на основі збирача webpack, у нас одразу буде доступний до роботи застосунок зі швидким перезавантаженням сторінки в браузері, технологією Hot Module Replacement і препроцесорами. Так ми розберемо файли з розширенням Vue, які були зроблені спеціально для цього фреймворка.
— Зачем нужен CLI
— Установка CLI и создание проекта
— Обзор структуры проекта
— Как запускается приложение

Блок 4. Компоненти

У цьому блоці ми дуже детально розберемо поняття компонентів у бібліотеці Vue. Ми розберемо навіщо потрібні компоненти, як їх реєструвати локально і глобально. До того ж ми розберемо, як це робиться в HTML-файлі і вже в цілому проєкті, який використовує файли з розширенням .vue. Далі ви дізнаєтеся про всі особливості взаємодії між компонентами, а також про те, як у Vue створюються локальні стилі, і багато іншого.

— Зачем нужны компоненты
— Метод data
— Локальная и глобальная регистрация
— Названия компонентов
— Регистрация компонентов в .vue
— Передача параметров компоненту
— Валидация входящих параметров
— Передача параметров от дочернего компонента
— Передача функции как параметр
— Связь дочерних компонентов
— Использование event emitter
— Изолированные стили
— Передача HTML компоненту

Блок 5. Директиви

У цьому блоці ми детально розберемо що таке директиви у Vue. Ми навчимося створювати свої власні директиви, дізнаємося про всі функції, якими можна скористатися під час розроблення власних директив і розберемося, як і коли їх потрібно використовувати. Після проходження блоку ви набагато краще зрозумієте, як працюють стандартні директиви і розберетеся в основному функціоналі бібліотеки.
— Создание своей директивы
— Взаимодействие с элементом
— Жизненный цикл директивы
— Параметры в директивах
— Аргументы в директивах
— Модификаторы
— Локальная регистрация

Блок 6. Фільтри та Міксини

У цьому блоці ми вивчимо фільтри та міксини. Ми навчимося перетворювати дані всередині шаблону будь-яким чином, яким ми побажаємо. Далі, ви навчитеся правильно фільтрувати в реальному часі списки і дізнаєтеся, яку технологію для цього потрібно застосовувати. Після ми познайомимося з таким поняттям як міксини і навчимося використовувати код у різних компонентах.

— Создание простых фильтров
— Фильтрация списков
— Использование миксинов

Блок 7. Робота з формами

Ви навчитеся працювати з формами та створювати свої власні елементи форми. Ми поетапно детально розберемо кожен з елементів форм, які є в HTML, і навчимося обробляти кожен з них. Після ми створимо свій власний компонент, який буде частиною форми, але ми запрограмуємо його самостійно.

— Текстовый инпут
— Текстарея
— Чекбоксы
— Радио кнопки
— Селекты
— Числовой модификатор
— Создание своего контрола

Блок 8. Валідація форм із Vuelidate

Цей блок присвячений сторонній бібліотеці Vuelidate. Ми навчимося використовувати і реєструвати сторонні плагіни у Vue, тим самим розширюючи функціонал фреймворка. Далі ми навчимося створювати динамічні і красиві валідації для будь-яких елементів форми, практично з будь-якими умовами і виводити повідомлення про помилки, залежно від умови.

— Научимся создавать свои собственные валидаторы, которые асинхронно или синхронно смогут проверять те значения, которые мы запрограммируем.
— Установка и настройка проекта
— Настройка валидаторов
— Визуальное отображение ошибок
— Валидация пароля
— Создание своего валидатора
— Отправка формы

Блок 9. Роутинг із Vue-router

Ви дізнаєтеся про додатковий плагін, який розширить функціонал Vue можливістю створювати безліч сторінок і робити навігацію між ними без перезавантаження сторінки. Ми познайомимося з основними можливостями цієї бібліотеки, де наочно розберемо весь її функціонал на практичних прикладах. Навчимося оптимізувати наш застосунок так, щоб сторінки завантажували свій код тільки в разі запиту, у такий спосіб значно збільшивши швидкість завантаження застосунку.

— Установка Vue-router
— Настройка роутера
— Создание навигации
— Обозначение активной ссылки
— Динамические роуты
— Программная навигация
— Вложенные роуты
— Передача параметров
— Хэш и скролл
— Редирект
— Защита роутов
— Ленивая загрузка

Блок 10. Робота із сервером із Vue-resource

У цьому блоці ми розберемо ще один додатковий плагін, який спрощує роботу з AJAX-запитами. Вивчимо основний функціонал цього плагіна, навчимося створювати нові записи в базі даних, завантажувати дані з бази, і багато іншого. Ви дізнаєтеся, як працювати з ресурсами та інтерсепторами.

— Настройка приложения
— Создание объектов POST
— Получение объектов GET
— Использование resource
— Глобальная настройка
— Интерсепторы

Блок 11. Робота з даними з Vuex

У цьому блоці ви познайомитеся з плагіном, який дає змогу дуже гнучко і зручно керувати даними, працюючи з Vue. Ви дізнаєтеся концепцію Vuex, як його реєструвати, як взаємодіяти з даними всередині нього: забирати, отримувати, змінювати, і багато іншого.

— Установка Vuex
— Использование state
— Использование getters
— Использование mutations
— Использование actions
— Оптимизация с помощью модулей

 

Частина 2. Практика. Розробка SPA (30 уроків, 6 годин)

Блок 12. Створення SPA-додатку на material design і firebase

Цей модуль присвячений практичній частині курсу, де ми всі знання, отримані в теорії, будемо застосовувати на практиці. Ми створимо SPA-додаток, який є Serverless - додатком, що працює без серверної частини. При цьому в нас буде повністю робоча база даних у хмарі, на сервісі Firebase від Google. У нас там буде реалізовано хостинг, базу даних, зберігання картинок і реєстрацію з авторизацією користувачів.

Як дизайн нами буде обрано Material Design від Google. Наш додаток буде повністю адаптивним, тобто він буде однаково добре відображатися на будь-якому екрані. За змістом це буде застосунок, у якому буде можливість переглядати і створювати оголошення про продаж чого-небудь і приймання заявок. Буде реалізовано особистий кабінет, можливість завантажувати картинки, редагувати оголошення та переглядати заявки.

— Создание проекта
— Обзор приложения
— Создание тулбара
— Добавление ссылок и адаптация
— Регистрация роутов
— Создание страницы логина
— Создание страницы регистрации
— Создание главной страницы
— Создание страницы заказов
— Создание страницы формы
— Создание страницы списка
— Создание страницы объявления
— Подключение Vuex
— Добавление объявлений
— Настройка firebase
— Регистрация пользователей
— Логин пользователей
— Вывод ошибок
— Поддержание сессии пользователя
— Защита роутов
— Создание объявления в firebase
— Загрузка объявлений по умолчанию
— Загрузка изображений в firebase
— Создание модального окна редактирования
— Редактирование объявления
— Создание окна покупки
— Создание и обработка заказов
— Управление цветами
— Подключение препроцессоров
— Заключение

Бонусний блок курсу складається з 6 новітніх актуальних відеокурсів:

Бонус 1. Преміум-курс із JavaScript (24 уроки, 19,5 годин)
Бонус 2. Преміум-курс з NodeJS (10 уроків, 2 години)
Бонус 3. Преміум-курс із Webpack (20 уроків, 3,5 години)
Бонус 4. Преміум-курс з EcmaScript 6 (17 уроків, понад 3 години)
Бонус 5. Анімації (8 уроків, 1,5 години)
Бонус 6. Деплой Vue додатка (2 уроки, 30 хвилин)
Перших 4 бонуси є самі по собі фундаментальними новими відеокурсами, що розкривають у найдрібніших подробицях усю теоретичну базу, необхідну для старту з повного нуля, включно з основами JavaScript.

Навіть повний новачок у сайтобудуванні зможе розібратися з курсом і освоїти Frontend-розробку на Vue.