Vue.js

Vue.js

Тип	фреймворк
Автор	Еван Юd[1][2][3]
Розробник	Еван Ю (англ. Evan You)
Перший випуск	2013
Стабільний випуск	3.2.37 (6 червня 2022)
Нестабільний випуск	2.4.2[4] (21 липня 2017; 7 років тому (2017-07-21))
Платформа	веб
Операційна система	кросплятформність
Мова програмування	TypeScript і JavaScript
Стан розробки	активний
Ліцензія	MIT
Репозиторій	https://github.com/vuejs/core
Вебсайт	ua.vuejs.org
Медіафайли у Вікісховищі

Vue.js (читається як «в'ю», з англ. view) — JavaScript-фреймворк, що використовує шаблон MVVM для створення інтерфейсів користувача на основі моделей даних^[6], через реактивне зв'язування даних.

Коли Еван Ю працював в Google Creative Labs, в нього виникла необхідність швидко побудувати прототип складного інтерфейсу, і потрібен був інструмент, щоб уникнути написання повторюваного HTML. React лише починався, AngularJS та Backbone були занадто громіздкі для прототипування, тому Еван створив свій фреймворк.^[7]

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

Оригінальний реліз Vue відбувся в грудні 2014 року. Інформація про проект було розміщено на  Hacker News, Echo JS, та the /r/javascript підкатегорії в день початкового релізу. За один день проект з'явився на перших сторінках цих сайтів.^[8]

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

У Vue ви можете використовувати синтаксис шаблонів або напряму писати рендерингові функції використовуючи JSX. Для того, щоб це зробити просто замініть шаблон на рендерингову функцію.^[9] Рендерингова функція відкриває можливості для потужних патернів базованих на компонентах — для прикладу, нова транзитна система тепер повністю базована на компонентах, що використовує рендерингові функції всередині.^[10]

Одна із найвиразніших особливостей Vue — це ненав'язлива реактивна система. Моделі це просто плоскі JavaScript об'єкти. Це робить керування станами дуже простим та інтуїтивним. Vue надає оптимізований ре-рендеринг з коробки без потреби робити що-небудь додатково. Кожен компонент слідкує за своїми реактивними залежностями під час рендерингу, тому система знає точно коли має відбуватись ре-рендеринг і які компоненти потрібно ре-рендерити.

Vue надає різноманітні шляхи для застосування ефектів переходу, коли елемент додають, оновлюють або видаляють з DOM. Наприклад:

• автоматичне застосування класів для CSS переходів та анімацій
• інтегрування сторонніх бібліотек для CSS анімацій, таких як Animate.css
• використовувати JavaScript для прямих маніпуляцій з DOM під час переходів
• інтегрування сторонніх JavaScript бібліотек анімацій, таких як Velocity.js

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

1. Vue автоматично перевірить чи має застосовують до цього елементу CSS анімації та переходи. Якщо так, CSS класи для переходів будуть додані/видалені у відповідний час
2. Якщо перехідний компонент має JavaScript зачіпки, ці зачіпки будуть викликані у відповідний час
3. Якщо ніяких CSS переходів/анімацій не було знайдено та ніяких JavaScript не було надано, DOM операції для додавання і/та видалення відбудеться одразу ж в наступному фреймі.^[11][12]

Vue сам по собі не включає роутингу, та є vue-router пакет, який вирішує це питання. Він підтримує зв'язування вкладенних шляхів з вкладеними компонентами і пропонує деталізований контроль над переходами. Vue дозволяє створення додатків за допомогою компонентів. Якщо додати vue-router до цього, все що потрібно зробити це зв'язати ваші компоненти з роутами і дозвольте vue-router вирішувати де їх рендерити.^[13]

• В проекті Grammarly^[14]
• У фреймворку Laravel 5
• Використовується для доповнення технології GitBook в проекті EdEra Books (https://www.ed-era.com/books/)^[15] [Архівовано 10 лютого 2017 у Wayback Machine.]

• Порівняння фреймворків JavaScript
• React
• AngularJS
• Angular (фреймворк)
• Бібліотека JavaScript
• Model-View-ViewModel
• Elm (мова програмування)

• Filipova, Olga (2016). Learning Vue.js 2: learn how to build amazing and complex reactive web applications easily with Vue.js. ISBN 978-1-78646-113-1. Процитовано 10 лютого 2017.

• Офіційний сайт [Архівовано 6 березня 2019 у Wayback Machine.]
• JavaScript довідка українською [Архівовано 23 січня 2022 у Wayback Machine.]