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.