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.