Vue.js

Vue.js
Тип фреймворк
Автор Еван Юd[1][2][3]
Розробник Еван Ю (англ. Evan You)
Перший випуск 2013
Стабільний випуск 3.2.37 (6 червня 2022)
Нестабільний випуск 2.4.2[4] (21 липня 2017; 6 років тому (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]

Використання[ред. | ред. код]

Див. також[ред. | ред. код]

Література[ред. | ред. код]

  • 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.

Посилання[ред. | ред. код]

Примітки[ред. | ред. код]

  1. ↑ https://www.lemonde.fr/economie/article/2018/11/11/logiciel-libre-les-limites-du-modele-du-benevolat_5382054_3234.html
  2. ↑ https://vuejs.org/v2/guide/team.html
  3. ↑ https://evanyou.me/
  4. ↑ Архівована копія. Архів оригіналу за 13 квітня 2021. Процитовано 25 липня 2017.{{cite web}}: Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title (посилання)
  5. ↑ https://vuejs.org/v2/guide/index.html
  6. ↑ VueJS. Simplified JavaScript Jargon. Архів оригіналу за 11 лютого 2017. Процитовано 10 лютого 2017.
  7. ↑ Філіпова, с. 10.
  8. ↑ First Week of Launching Vue.js. Evan You. Архів оригіналу за 12 квітня 2017. Процитовано 12 березня 2017.
  9. ↑ Template Syntax — Vue.js (англ.). Архів оригіналу за 4 листопада 2021. Процитовано 12 березня 2017.
  10. ↑ Vue 2.0 is Here!. The Vue Point. 30 вересня 2016. Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
  11. ↑ Transitioning State — Vue.js (англ.). Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
  12. ↑ Transition Effects — Vue.js (англ.). Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
  13. ↑ Routing — Vue.js (англ.). Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
  14. ↑ Філіпова, с. 29.
  15. ↑ Філіпова, с. 25.
Отримано з https://uk.wikipedia.org/w/index.php?title=Vue.js&oldid=41731862