Pending

Vue.js

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до навігації Перейти до пошуку
Vue.js
Типфреймворк
АвторЕван Юd-1">[1]-2">[2]-3">[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]

Використання

[ред. | ред. код]

Див. також

[ред. | ред. код]

Література

[ред. | ред. код]
  • 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-0">↑ https://www.lemonde.fr/economie/article/2018/11/11/logiciel-libre-les-limites-du-modele-du-benevolat_5382054_3234.html
    • _2-0">↑ https://vuejs.org/v2/guide/team.html
    • _3-0">↑ https://evanyou.me/
  • ↑ Архівована копія. Архів оригіналу за 13 квітня 2021. Процитовано 25 липня 2017.{{cite web}}: Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title (посилання)
    • _5-0">↑ https://vuejs.org/v2/guide/index.html
  • ↑ 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.