Vue.js
З Вікіпедії, вільної енциклопедії
Vue.js (читається як «в'ю», з англ. view) — JavaScript-фреймворк, що використовує шаблон MVVM для створення інтерфейсів користувача на основі моделей даних[5], через реактивне зв'язування даних.
 | |
| Тип | фреймворк |
|---|---|
| Автор | Еван Юd[1][2][3] |
| Розробник | Еван Ю (англ. Evan You) |
| Перший випуск | 2013 |
| Стабільний випуск | 3.2.37 (6 червня 2022) |
| Нестабільний випуск | 2.4.2[4] (21 липня 2017) |
| Платформа | веб |
| Операційна система | кросплятформність |
| Мова програмування | TypeScript і JavaScript |
| Стан розробки | активний |
| Ліцензія | MIT |
| Репозиторій | https://github.com/vuejs/core |
| Вебсайт | ua.vuejs.org |
Історія
Коли Еван Ю працював в Google Creative Labs, в нього виникла необхідність швидко побудувати прототип складного інтерфейсу, і потрібен був інструмент, щоб уникнути написання повторюваного HTML. React лише починався, AngularJS та Backbone були занадто громіздкі для прототипування, тому Еван створив свій фреймворк.[6]
З того часу Vue.js еволюціонував, і дозволяє писати не тільки прототипи, а й складні вебзастосунки.
Оригінальний реліз Vue відбувся в грудні 2014 року. Інформація про проект було розміщено на Hacker News, Echo JS, та the /r/javascript підкатегорії в день початкового релізу. За один день проект з'явився на перших сторінках цих сайтів.[7]
Особливості
Узагальнити
Перспектива
Шаблони
Vue використовує синтаксис шаблонів на основі HTML, що дозволяє декларативно зв'язувати рендеринг DOM з основними екземплярами даних в Vue. Всі Vue шаблони валідні HTML, і можуть бути розпарсені браузерами та HTML парсерами. Всередині Vue компілює шаблони в рендерингові функції віртуального DOM. В поєднанні з реактивною системою, Vue здатний розумно обчислити кількість компонентів для ре-рендингу та застосувати мінімальну кількість маніпуляцій з DOM, коли стан застосунку зміниться.
У Vue ви можете використовувати синтаксис шаблонів або напряму писати рендерингові функції використовуючи JSX. Для того, щоб це зробити просто замініть шаблон на рендерингову функцію.[8] Рендерингова функція відкриває можливості для потужних патернів базованих на компонентах — для прикладу, нова транзитна система тепер повністю базована на компонентах, що використовує рендерингові функції всередині.[9]
Реактивність
Одна із найвиразніших особливостей Vue — це ненав'язлива реактивна система. Моделі це просто плоскі JavaScript об'єкти. Це робить керування станами дуже простим та інтуїтивним. Vue надає оптимізований ре-рендеринг з коробки без потреби робити що-небудь додатково. Кожен компонент слідкує за своїми реактивними залежностями під час рендерингу, тому система знає точно коли має відбуватись ре-рендеринг і які компоненти потрібно ре-рендерити.
Переходи
Vue надає різноманітні шляхи для застосування ефектів переходу, коли елемент додають, оновлюють або видаляють з DOM. Наприклад:
- автоматичне застосування класів для CSS переходів та анімацій
- інтегрування сторонніх бібліотек для CSS анімацій, таких як Animate.css
- використовувати JavaScript для прямих маніпуляцій з DOM під час переходів
- інтегрування сторонніх JavaScript бібліотек анімацій, таких як Velocity.js
Коли елемент, який загорнутий перехідний компонент видаляють чи вставляють, ось що відбувається:
- Vue автоматично перевірить чи має застосовують до цього елементу CSS анімації та переходи. Якщо так, CSS класи для переходів будуть додані/видалені у відповідний час
- Якщо перехідний компонент має JavaScript зачіпки, ці зачіпки будуть викликані у відповідний час
- Якщо ніяких CSS переходів/анімацій не було знайдено та ніяких JavaScript не було надано, DOM операції для додавання і/та видалення відбудеться одразу ж в наступному фреймі.[10][11]
Роутинг
Vue сам по собі не включає роутингу, та є vue-router пакет, який вирішує це питання. Він підтримує зв'язування вкладенних шляхів з вкладеними компонентами і пропонує деталізований контроль над переходами. Vue дозволяє створення додатків за допомогою компонентів. Якщо додати vue-router до цього, все що потрібно зробити це зв'язати ваші компоненти з роутами і дозвольте vue-router вирішувати де їх рендерити.[12]
Використання
- В проекті Grammarly[13]
- У фреймворку Laravel 5
- Використовується для доповнення технології GitBook в проекті EdEra Books (https://www.ed-era.com/books/) [Архівовано 10 лютого 2017 у Wayback Machine.]
Див. також
Література
- 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.]
Примітки
Wikiwand - on
Seamless Wikipedia browsing. On steroids.