Vue.js (читається як «в'ю», з англ. view) — JavaScript-фреймворк, що використовує шаблон MVVM для створення інтерфейсів користувача на основі моделей даних, через реактивне зв'язування даних.
Тип | фреймворк |
---|---|
Автор | d[1][2][3] |
Розробник | Еван Ю (англ. Evan You) |
Перший випуск | 2013 |
Стабільний випуск | 3.2.37 (6 червня 2022) |
Нестабільний випуск | 2.4.2 (21 липня 2017 ) |
Платформа | веб |
Операційна система | кросплатформова програма |
Мова програмування | TypeScript і JavaScript |
Стан розробки | активний |
Ліцензія | MIT |
Репозиторій | https://github.com/vuejs/core |
Вебсайт | ua.vuejs.org |
|
Історія
Коли Еван Ю працював в , в нього виникла необхідність швидко побудувати прототип складного інтерфейсу, і потрібен був інструмент, щоб уникнути написання повторюваного HTML. React лише починався, AngularJS та Backbone були занадто громіздкі для прототипування, тому Еван створив свій фреймворк.
З того часу Vue.js еволюціонував, і дозволяє писати не тільки прототипи, а й складні вебзастосунки.
Оригінальний реліз Vue відбувся в грудні 2014 року. Інформація про проект було розміщено на Hacker News, Echo JS, та the /r/javascript підкатегорії в день початкового релізу. За один день проект з'явився на перших сторінках цих сайтів.
Особливості
Шаблони
Vue використовує синтаксис шаблонів на основі HTML, що дозволяє декларативно зв'язувати рендеринг DOM з основними екземплярами даних в Vue. Всі Vue шаблони валідні HTML, і можуть бути розпарсені браузерами та . Всередині Vue компілює шаблони в рендерингові функції . В поєднанні з реактивною системою, Vue здатний розумно обчислити кількість компонентів для ре-рендингу та застосувати мінімальну кількість маніпуляцій з DOM, коли стан застосунку зміниться.
У Vue ви можете використовувати синтаксис шаблонів або напряму писати рендерингові функції використовуючи . Для того, щоб це зробити просто замініть шаблон на рендерингову функцію. Рендерингова функція відкриває можливості для потужних патернів базованих на компонентах — для прикладу, нова транзитна система тепер повністю базована на компонентах, що використовує рендерингові функції всередині.
Реактивність
Одна із найвиразніших особливостей Vue — це ненав'язлива реактивна система. Моделі це просто плоскі JavaScript об'єкти. Це робить керування станами дуже простим та інтуїтивним. Vue надає оптимізований ре-рендеринг з коробки без потреби робити що-небудь додатково. Кожен компонент слідкує за своїми реактивними залежностями під час рендерингу, тому система знає точно коли має відбуватись ре-рендеринг і які компоненти потрібно ре-рендерити.
Переходи
Vue надає різноманітні шляхи для застосування ефектів переходу, коли елемент додають, оновлюють або видаляють з DOM. Наприклад:
- автоматичне застосування класів для CSS переходів та анімацій
- інтегрування сторонніх бібліотек для CSS анімацій, таких як Animate.css
- використовувати JavaScript для прямих маніпуляцій з DOM під час переходів
- інтегрування сторонніх JavaScript бібліотек анімацій, таких як
Коли елемент, який загорнутий перехідний компонент видаляють чи вставляють, ось що відбувається:
- Vue автоматично перевірить чи має застосовують до цього елементу CSS анімації та переходи. Якщо так, CSS класи для переходів будуть додані/видалені у відповідний час
- Якщо перехідний компонент має JavaScript зачіпки, ці зачіпки будуть викликані у відповідний час
- Якщо ніяких CSS переходів/анімацій не було знайдено та ніяких JavaScript не було надано, DOM операції для додавання і/та видалення відбудеться одразу ж в наступному фреймі.
Роутинг
Vue сам по собі не включає роутингу, та є vue-router пакет, який вирішує це питання. Він підтримує зв'язування вкладенних шляхів з вкладеними компонентами і пропонує деталізований контроль над переходами. Vue дозволяє створення додатків за допомогою компонентів. Якщо додати vue-router до цього, все що потрібно зробити це зв'язати ваші компоненти з роутами і дозвольте vue-router вирішувати де їх рендерити.
Використання
- В проекті Grammarly
- У фреймворку Laravel 5
- Використовується для доповнення технології GitBook в проекті 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 . Процитовано 10 лютого 2017.
Посилання
- Офіційний сайт [ 6 березня 2019 у Wayback Machine.]
- JavaScript довідка українською [ 23 січня 2022 у Wayback Machine.]
Примітки
- 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.
{{}}
: Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title () - https://vuejs.org/v2/guide/index.html
- . Simplified JavaScript Jargon. Архів оригіналу за 11 лютого 2017. Процитовано 10 лютого 2017.
- Філіпова, с. 10.
- . Evan You. Архів оригіналу за 12 квітня 2017. Процитовано 12 березня 2017.
- (англ.). Архів оригіналу за 4 листопада 2021. Процитовано 12 березня 2017.
- . The Vue Point. 30 вересня 2016. Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
- (англ.). Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
- (англ.). Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
- (англ.). Архів оригіналу за 12 березня 2017. Процитовано 12 березня 2017.
- Філіпова, с. 29.
- Філіпова, с. 25.
Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет
Vue js chitayetsya yak v yu z angl view JavaScript frejmvork sho vikoristovuye shablon MVVM dlya stvorennya interfejsiv koristuvacha na osnovi modelej danih cherez reaktivne zv yazuvannya danih Vue jsTipfrejmvorkAvtord 1 2 3 RozrobnikEvan Yu angl Evan You Pershij vipusk2013Stabilnij vipusk3 2 37 6 chervnya 2022 Nestabilnij vipusk2 4 2 21 lipnya 2017 6 rokiv tomu 2017 07 21 PlatformavebOperacijna sistemakrosplatformova programaMova programuvannyaTypeScript i JavaScriptStan rozrobkiaktivnijLicenziyaMITRepozitorijhttps github com vuejs coreVebsajtua vuejs org Mediafajli u VikishovishiIstoriyaKoli Evan Yu pracyuvav v v nogo vinikla neobhidnist shvidko pobuduvati prototip skladnogo interfejsu i potriben buv instrument shob uniknuti napisannya povtoryuvanogo HTML React lishe pochinavsya AngularJS ta Backbone buli zanadto gromizdki dlya prototipuvannya tomu Evan stvoriv svij frejmvork Z togo chasu Vue js evolyucionuvav i dozvolyaye pisati ne tilki prototipi a j skladni vebzastosunki Originalnij reliz Vue vidbuvsya v grudni 2014 roku Informaciya pro proekt bulo rozmisheno na Hacker News Echo JS ta the r javascript pidkategoriyi v den pochatkovogo relizu Za odin den proekt z yavivsya na pershih storinkah cih sajtiv OsoblivostiShabloni Vue vikoristovuye sintaksis shabloniv na osnovi HTML sho dozvolyaye deklarativno zv yazuvati rendering DOM z osnovnimi ekzemplyarami danih v Vue Vsi Vue shabloni validni HTML i mozhut buti rozparseni brauzerami ta Vseredini Vue kompilyuye shabloni v renderingovi funkciyi V poyednanni z reaktivnoyu sistemoyu Vue zdatnij rozumno obchisliti kilkist komponentiv dlya re rendingu ta zastosuvati minimalnu kilkist manipulyacij z DOM koli stan zastosunku zminitsya U Vue vi mozhete vikoristovuvati sintaksis shabloniv abo napryamu pisati renderingovi funkciyi vikoristovuyuchi Dlya togo shob ce zrobiti prosto zaminit shablon na renderingovu funkciyu Renderingova funkciya vidkrivaye mozhlivosti dlya potuzhnih paterniv bazovanih na komponentah dlya prikladu nova tranzitna sistema teper povnistyu bazovana na komponentah sho vikoristovuye renderingovi funkciyi vseredini Reaktivnist Odna iz najviraznishih osoblivostej Vue ce nenav yazliva reaktivna sistema Modeli ce prosto ploski JavaScript ob yekti Ce robit keruvannya stanami duzhe prostim ta intuyitivnim Vue nadaye optimizovanij re rendering z korobki bez potrebi robiti sho nebud dodatkovo Kozhen komponent slidkuye za svoyimi reaktivnimi zalezhnostyami pid chas renderingu tomu sistema znaye tochno koli maye vidbuvatis re rendering i yaki komponenti potribno re renderiti Perehodi Vue nadaye riznomanitni shlyahi dlya zastosuvannya efektiv perehodu koli element dodayut onovlyuyut abo vidalyayut z DOM Napriklad avtomatichne zastosuvannya klasiv dlya CSS perehodiv ta animacij integruvannya storonnih bibliotek dlya CSS animacij takih yak Animate css vikoristovuvati JavaScript dlya pryamih manipulyacij z DOM pid chas perehodiv integruvannya storonnih JavaScript bibliotek animacij takih yak Koli element yakij zagornutij perehidnij komponent vidalyayut chi vstavlyayut os sho vidbuvayetsya Vue avtomatichno perevirit chi maye zastosovuyut do cogo elementu CSS animaciyi ta perehodi Yaksho tak CSS klasi dlya perehodiv budut dodani vidaleni u vidpovidnij chas Yaksho perehidnij komponent maye JavaScript zachipki ci zachipki budut viklikani u vidpovidnij chas Yaksho niyakih CSS perehodiv animacij ne bulo znajdeno ta niyakih JavaScript ne bulo nadano DOM operaciyi dlya dodavannya i ta vidalennya vidbudetsya odrazu zh v nastupnomu frejmi Routing Vue sam po sobi ne vklyuchaye routingu ta ye vue router paket yakij virishuye ce pitannya Vin pidtrimuye zv yazuvannya vkladennih shlyahiv z vkladenimi komponentami i proponuye detalizovanij kontrol nad perehodami Vue dozvolyaye stvorennya dodatkiv za dopomogoyu komponentiv Yaksho dodati vue router do cogo vse sho potribno zrobiti ce zv yazati vashi komponenti z routami i dozvolte vue router virishuvati de yih renderiti VikoristannyaV proekti Grammarly U frejmvorku Laravel 5 Vikoristovuyetsya dlya dopovnennya tehnologiyi GitBook v proekti Books https www ed era com books 10 lyutogo 2017 u Wayback Machine Div takozhPorivnyannya frejmvorkiv JavaScript React AngularJS Angular frejmvork Biblioteka JavaScript Model View ViewModel Elm mova programuvannya LiteraturaFilipova 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 Procitovano 10 lyutogo 2017 PosilannyaOficijnij sajt 6 bereznya 2019 u Wayback Machine JavaScript dovidka ukrayinskoyu 23 sichnya 2022 u Wayback Machine Primitkihttps 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 Arhiv originalu za 13 kvitnya 2021 Procitovano 25 lipnya 2017 a href wiki D0 A8 D0 B0 D0 B1 D0 BB D0 BE D0 BD Cite web title Shablon Cite web cite web a Obslugovuvannya CS1 Storinki z tekstom archived copy yak znachennya parametru title posilannya https vuejs org v2 guide index html Simplified JavaScript Jargon Arhiv originalu za 11 lyutogo 2017 Procitovano 10 lyutogo 2017 Filipova s 10 Evan You Arhiv originalu za 12 kvitnya 2017 Procitovano 12 bereznya 2017 angl Arhiv originalu za 4 listopada 2021 Procitovano 12 bereznya 2017 The Vue Point 30 veresnya 2016 Arhiv originalu za 12 bereznya 2017 Procitovano 12 bereznya 2017 angl Arhiv originalu za 12 bereznya 2017 Procitovano 12 bereznya 2017 angl Arhiv originalu za 12 bereznya 2017 Procitovano 12 bereznya 2017 angl Arhiv originalu za 12 bereznya 2017 Procitovano 12 bereznya 2017 Filipova s 29 Filipova s 25