Vue.js
 Категорія:Модуль:InfoboxImage:застарілий синтаксис зображень | |
| Тип | фреймворк |
|---|---|
| Автор | Еван Ю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 |
Vue.js (читається як «в'ю», з англ. view) — JavaScript-фреймворк, що використовує шаблон MVVM для створення інтерфейсів користувача на основі моделей даних[5], через реактивне зв'язування даних.
Історія
Коли Еван Ю працював в 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.Категорія:Шаблон:Webarchive:посилання на 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.
Посилання
Примітки
- ↑ https://www.lemonde.fr/economie/article/2018/11/11/logiciel-libre-les-limites-du-modele-du-benevolat_5382054_3234.html
- ↑ https://vuejs.org/v2/guide/team.html
- ↑ https://evanyou.me/
- ↑ Архівована копія. Архів оригіналу за 13 квітня 2021. Процитовано 25 липня 2017.
{{cite web}}: Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title (посилання)Категорія:Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title - ↑ VueJS. Simplified JavaScript Jargon. Архів оригіналу за 11 лютого 2017. Процитовано 10 лютого 2017.
- ↑ Філіпова, с. 10.
- ↑ First Week of Launching Vue.js. Evan You. Архів оригіналу за 12 квітня 2017. Процитовано 12 березня 2017.
- ↑ Template Syntax — Vue.js (англ.). Архів оригіналу за 4 листопада 2021. Процитовано 12 березня 2017.
- ↑ Vue 2.0 is Here!. The Vue Point. 30 вересня 2016. Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
- ↑ Transitioning State — Vue.js (англ.). Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
- ↑ Transition Effects — Vue.js (англ.). Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
- ↑ Routing — Vue.js (англ.). Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
- ↑ Філіпова, с. 29.
- Філіпова, с. 25.