Vue.js
- github
.com /vuejs /core
Vue.Js (познат и као Vue [2]) је front-end JavaScript библиотека за Model-view-viewmodel која се користи за креирање корисничких интерфејса и апликација на једној страници .[8] Ова библиотека је креирана од стране Evan You-а, а одржавају је он и остали активни чланови уског тима.[9]
Преглед
Vue.js користи постепено прилагодљиву архитектуру која се фокусира на декларативни приказ и композицију компоненти. Основна библиотека је усмерена искључиво на приказни слој.[2] За напредне функционалности потребне у сложеним апликацијама, као што су рутирање, управљање стањем и алати за развој, користе се званично одржавани пакети и библиотеке.[10]
Vue.js омогућава проширење HTML-а помоћу HTML атрибута који се зову директиве. [11] Директиве пружају функционалност HTML апликацијама могу бити уграђене или кориснички дефинисане директиве.
Историја
Vue је креирао Evan You након рада за Google користећи AngularJS у неколико пројеката. Касније је описао свој процес размишљања на следећи начин: "Помислио сам, шта када бих могао само издвојити део који ми се заиста свиђао у вези са Angular-ом и изградити нешто веома лако."[12] Прво улагање изворног кода на пројекту датира из јула 2013. године, а Vue је први пут јавно најављен следећег фебруара, 2014. godine.
[13] [14]
Имена верзија су често изведена из манге и анимеа.
Верзије
Верзија | Датум изласка | Наслов | Крај дугорочне подршке (LTS). | Крај животног века |
---|---|---|---|---|
3.4 | 000000002023-12-28-000028. децембар 2023. | Slam Dunk[15] | ||
3.3 | 000000002023-05-11-000011. мај 2023. | Rurouni Kenshin[16] | ||
3.2 | 000000002021-08-05-00005. август 2021. | Quintessential Quintuplets[17] | ||
3.1 | 000000002021-06-07-00007. јун 2021. | Pluto[18] | ||
3.0 | 000000002020-09-18-000018. септембар 2020. | One Piece[19] | ||
2.7 | 000000002022-07-01-00001. јул 2022. | Naruto[20] | 000000002023-12-31-000031. децембар 2023. | 000000002023-12-31-000031. децембар 2023. |
2.6 | 000000002019-02-04-00004. фебруар 2019. | Macross[21] | 000000002022-03-18-000018. март 2022. | 000000002023-09-18-000018. септембар 2023. |
2.5 | 000000002017-10-13-000013. октобар 2017. | Level E[22] | ||
2.4 | 000000002017-07-13-000013. јул 2017. | Kill la Kill[23] | ||
2.3 | 000000002017-04-27-000027. април 2017. | JoJo's Bizarre Adventure[24] | ||
2.2 | 000000002017-02-26-000026. фебруар 2017. | Initial D[25] | ||
2.1 | 000000002016-11-22-000022. новембар 2016. | Hunter X Hunter[26] | ||
2.0 | 000000002016-09-30-000030. септембар 2016. | Ghost in the Shell[27] | ||
1.0 | 000000002015-10-27-000027. октобар 2015. | Evangelion[28] | ||
0.12 | 000000002015-06-12-000012. јун 2015. | Dragon Ball[29] | ||
0.11 | 000000002014-11-07-00007. новембар 2014. | Cowboy Bebop[30] | ||
0.10 | 000000002014-03-23-000023. март 2014. | Blade Runner[31] | ||
0.9 | 000000002014-02-25-000025. фебруар 2014. | Animatrix[32] | ||
0.8 | 000000002014-01-27-000027. јануар 2014. | Н/Д[33] | прва верзија јавно објављена[13][14] | |
0.7 | 000000002013-12-24-000024. децембар 2013. | Н/Д[34] | ||
0.6 | 000000002013-12-08-00008. децембар 2013. | VueJS[35] |
Када се објави нова главна верзија, на пример, v3.y.z, последње минорно издање, на пример, 2.x.y, постаће издање са дугорочном подршком (LTS) у трајању од 18 месеци (са исправкама грешака и безбедносним закрпама), а за следећих 18 месеци биће у режиму одржавања (само са безбедносним закрпама). [36]
Карактеристике
Компоненте
Vue компоненте проширују основне HTML елементе како би уклопили преупотребљиви код. На високом нивоу, компоненте су прилагођени елементи којима Вue-ов компилатор придружује понашање. У Vue-у, компонент је у основи Vue инстанца са предефинисаним опцијама. [37] У следећем делу кода се налази пример Vue компонента[38]. Компонент приказује дугме и исписује број пута када је дугме кликнуто:
<template> <div> <button v-on:click="count++">Klikni me</button> <p>kliknuto [[:Шаблон:Count]] puta </p> </div> </template> <script> export default { data() { return { count: 0 }; } }; </script> <style> button { font-size: 1rem; background-color: red; color: white; padding: 0.3rem 0.8rem; } </style>
Шаблони
Vue користи HTML-базирану синтаксу шаблона која омогућава повезивање рендерованог која омогућава повезивање рендерованог ДОМ-а са подацима основне Vue инстанце. Сви Vue шаблони су важећи HTML који могу да се парсирају од стране браузера који поштује спецификације и HTML парсере . Vue компајлира шаблоне у функције виртуелног ДОМ-а за рендеровање. Виртуелни модел објекта документа (или "DOM") омогућава Vue-у да рендерује компоненте у својој меморији пре него што ажурира прегледач. У комбинацији са системом реактивности, Vue може да израчуна минимални број компоненти за поновно рендеровање и да примени минималну количину манипулације DOM-а када се промени стање апликације.
Vue корисници могу користити синтаксу шаблона или изабрати да директно пишу функције за рендеровање користећи хиперскрипт, било позивајући функције или користећи JSX. [39] Функције за рендеровање омогућавају изградњу апликација из софтверских компоненти. [40]
Реактивност
Vue има систем реактивности који користи обичне JavaScript објекте и оптимизовано поновно рендеровање. Свака компонента прати своје реактивне зависности током свог рендеровања, тако да систем прецизно зна када да изврши поновно рендеровање и које компоненте да поново рендерује.[41]
Транзиције
Vue пружа различите начине за примену ефеката транзиције када се ставке додају, ажурирају или уклоне из DOM-а . Ово укључује алате за:
- Аутоматски применљиве класе за ЦСС прелазе и анимације
- Интеграцију библиотека CSS анимација осталих извора, као што је Animate.css
- Коришћење JavaScripta-а за директно манипулисање DOM-ом за време кука за транзицију
- Интегришите библиотеке JavaScripta анимација осталих извора, као што јеVelocity.js
Када се елемент умота у компоненту за транзицију и убаци или уклони, деси се следеће:
- Vue ће аутоматски детектовати да ли циљни елемент има примењене CSS транзиције или анимације. Уколико их има, CSS класе за транзицију ће бити додате/уклоњене у одговарајућим временима.
- Уколико компонента за транзицију пружа JavaScript hooks, биће позване у одговарајућим временима.
- Ако нису откривене CSS транзиције/анимације и ако нису пружене JavaScript hooks, операције DOM-a за уметање и/или уклањање ће бити извршене одмах у следећем фрејму. [42] [43]
Рутирање
Традиционални недостатак једностраничких апликација (SPA) је немогућност дељења линкова до тачне "под"странице унутар одређене веб странице. Пошто SPA сервира својим корисницима само један одговор заснован на URL-у са сервера (обично сервирају index.html или index.vue), обележавање одређених екрана или дељење линкова до специфичних делова је обично тешко, ако не и немогуће. Да би се решио овај проблем, многи клијентски рутери раздвајају своје динамичке URL-ове са "хашбенгом" (#!), на пример, page.com/#!/. Међутим, са HTML5, већина модерних прегледача подржава рутирање без хашбенга.
Vue пружа интерфејс за промену приказаног садржаја на страници на основу тренутне путање URL-а - без обзира на то како је промењен (било путем линка послатог имејлом, освежавања странице или линкова унутар странице). Додатно, коришћењем фронт-енд рутера омогућава се намерно мењање путање прегледача када се десе одређени догађаји у прегледачу (нпр. кликтање) на дугмадима или линковима. Vue сам по себи не долази са рутирањем преко хаша. Међутим, open-source "vue-router" пакет пружа API за ажурирање URL-а апликације, подржава дугме за повратак (навигацију кроз историју), као и линкове за ресетовање лозинке или потврду путем имејла са параметрима URL-а за аутентификацију. Подржава мапирање угњеждених рута на угњеждене компоненте и нуди детаљну контролу транзиције. Са Vue-ом, програмери већ састављају апликације помоћу малих грађевинских блокова који граде веће компоненте. Са vue-router-ом додатим у мешавину, компоненте само треба мапирати на руте којима припадају, а родитељске/рутне руте треба да показу где деца треба да се рендерују. [44]
<div id="app"> <router-view></router-view> </div> ... <script> ... const User = { template: '<div>User {{ $route.params.id }}</div>' }; const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }); ... </script>
Код изнад:
- Поставља фронт-енд руту на
websitename.com/user/<id>
. - Која ће бити приказана у корисничко дефинисаној компоненти у (const User...)
- Омогућава компоненти Корисник да проследи одређени ид корисника који је унет у URL користећи кључ params објекта $роуте:
$route.params.id
. - Овај шаблон (варираће у зависности од параметара који се прослеђују у рутер) биће приказан у
<router-view></router-view>
унутар div#app у DOM-у. - Финално генерисани HTML за некога ко укуца:
websitename.com/user/1
биће:
<div id="app"> <div> <div>User 1</div> </div> </div>
Екосистем
Основна библиотека иде у пакету са алатима и библиотекама које су развили основни тим и сарадници.
Званични алати
- Devtools – Проширење алатки за дебаговање Вуе.јс апликација у прегледачу.
- Vite – Стандардни алати за брзи развој Vue.js апликација. Vue Loader – учитавач веб пакета који омогућава писање Vue компоненти у формату који се зове Single-File Components (SFCs)
Званичне библиотеке
- Vue Router – Званични рутер
- Vuex – Централизовано управљање инспирисано Flux-ом
- Vue Server Renderer – Рендеровање на страни сервера
- Pinia – Ново поједностављено управљање стањем
Види још
- Поређење веб оквира заснованих на JavaScript-у
- React
- AngularJS
- Angular
- Quasar Framework
- Веб-фрејмворк
- JavaScript библиотека
- Model–view–ViewModel
- Nuxt.js
Референце
- ^ „@vue/runtime-dom v3.2.45”. Bundlephobia (на језику: енглески). Приступљено 2023-01-29.
- ^ а б в „Introduction”. Vuejs.org (на језику: енглески). Приступљено 3. 1. 2020. CS1 одржавање: Формат датума (веза)
- ^ Macrae, Callum (2018). Vue.js: Up and Running: Building Accessible and Performant Web Apps (на језику: енглески). O'Reilly Media. ISBN 978-1-4919-9721-5.
- ^ Nelson, Brett (2018). Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch (на језику: енглески). Apress. ISBN 978-1-4842-3781-6.
- ^ Yerburgh, Edd (2019). Testing Vue.js Applications (на језику: енглески). Manning Publications. ISBN 978-1-61729-524-9.
- ^ Freeman, Adam (2018). Pro Vue.js 2 (на језику: енглески). Apress. ISBN 978-1-4842-3805-9.
- ^ Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A.; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019). Working with Vue.js (на језику: енглески). SitePoint. ISBN 978-1-4920-7144-0. [мртва веза]
- ^ [3][4][5][6][7][2]
- ^ „Meet the Team”. Vuejs.org (на језику: енглески). Приступљено 23. 9. 2019. CS1 одржавање: Формат датума (веза)
- ^ „Evan is creating Vue.js”. Patreon (на језику: енглески). Приступљено 11. 3. 2017. CS1 одржавање: Формат датума (веза)
- ^ „What is Vue.js”. W3Schools (на језику: енглески). Приступљено 21. 1. 2020. CS1 одржавање: Формат датума (веза)
- ^ „Evan You”. Between the Wires (на језику: енглески). 3. 11. 2016. Архивирано из оригинала 3. 6. 2017. г. Приступљено 26. 8. 2017. CS1 одржавање: Формат датума (веза)
- ^ а б „Vue.js: JavaScript MVVM made simple”. Hacker News. 2014-02-03. Приступљено 2023-01-29.
- ^ а б „First Week of Launching Vue.js”. Evan You. 2014-02-11. Приступљено 2023-01-29.
- ^ „Announcing Vue 3.4”. Vue.js. 28. 12. 2023. Приступљено 29. 3. 2024. CS1 одржавање: Формат датума (веза)
- ^ „v3.3.0 Rurouni Kenshin”. Vue.js (на језику: енглески). 11. 5. 2023. Приступљено 2023-05-12 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v3.2.0 Quintessential Quintuplets”. Vue.js (на језику: енглески). 5. 8. 2021. Приступљено 10. 8. 2021 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v3.1.0 Pluto”. Vue.js (на језику: енглески). 7. 6. 2021. Приступљено 18. 7. 2021 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v3.0.0 One Piece”. Vue.js (на језику: енглески). 18. 9. 2020. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v2.7.0 Naruto”. Vue.js (на језику: енглески). 1. 7. 2022. Приступљено 1. 7. 2022 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v2.6.0 Macross”. Vue.js (на језику: енглески). 4. 2. 2019. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v2.5.0 Level E”. Vue.js (на језику: енглески). 13. 10. 2017. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v2.4.0 Kill la Kill”. Vue.js (на језику: енглески). 13. 7. 2017. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v2.3.0 JoJo's Bizarre Adventure”. Vue.js (на језику: енглески). 27. 4. 2017. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v2.2.0 Initial D”. Vue.js (на језику: енглески). 26. 2. 2017. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v2.1.0 Hunter X Hunter”. Vue.js (на језику: енглески). 22. 11. 2016. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v2.0.0 Ghost in the Shell”. Vue.js (на језику: енглески). 30. 9. 2016. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „1.0.0 Evangelion”. Vue.js (на језику: енглески). 27. 10. 2015. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „0.12.0: Dragon Ball”. Vue.js (на језику: енглески). 12. 6. 2015. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v0.11.0: Cowboy Bebop”. Vue.js (на језику: енглески). 7. 11. 2014. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v0.10.0: Blade Runner”. Vue.js (на језику: енглески). 23. 3. 2014. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v0.9.0: Animatrix”. Vue.js (на језику: енглески). 25. 2. 2014. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v0.8.0”. Vue.js (на језику: енглески). 27. 1. 2014. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „v0.7.0”. Vue.js (на језику: енглески). 24. 12. 2013. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „0.6.0: VueJS”. Vue.js (на језику: енглески). 8. 12. 2013. Приступљено 23. 9. 2020 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „Vue Roadmap”. Vue.js (на језику: енглески). 6. 11. 2022 — преко GitHub. CS1 одржавање: Формат датума (веза)
- ^ „Components”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. CS1 одржавање: Формат датума (веза)
- ^ „Šta su Vue.js komponente?”. Web Programiranje (на језику: српски). 2018-05-13. Приступљено 2024-04-09.
- ^ „Template Syntax”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. CS1 одржавање: Формат датума (веза)
- ^ „Vue 2.0 is Here!”. The Vue Point. 30. 9. 2016. Приступљено 11. 3. 2017. CS1 одржавање: Формат датума (веза)
- ^ „Reactivity in Depth”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. CS1 одржавање: Формат датума (веза)
- ^ „Transition Effects”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. CS1 одржавање: Формат датума (веза)
- ^ „Transitioning State”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. CS1 одржавање: Формат датума (веза)
- ^ „Routing”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. CS1 одржавање: Формат датума (веза)
Спољашње везе
- Званични веб-сајт
- Шта је Vue.js
- п
- р
- у
- Поређење
- CppCMS
- Wt
- CFWheels
- ColdBox Platform
- ColdSpring
- Fusebox
- Mach-II
- Model-Glue
- Caveman2
- CL-HTTP
- UnCommon Web
- Weblocks
- Happstack
- Yesod
- Snap
- AppFuse
- Flexive
- Grails
- GWT
- ICEfaces
- ItsNat
- JavaServer Faces
- JHipster
- Jspx
- JWt
- OpenXava
- Play
- Reasonable Server Faces
- Remote Application Platform
- RIFE
- Seam
- Sling
- Spring
- Stripes
- Struts
- Tapestry
- Vaadin
- Vert.x
- WebWork
- Wicket
- WaveMaker
- ZK
- Catalyst
- Dancer
- Mason
- Maypole
- Mojolicious
- WebGUI
- Camping
- Merb
- Padrino
- Ruby on Rails
- Sinatra
- Lift
- Play
- Scalatra
- AIDA/Web
- Seaside
- Vibe.d (D)
- Application Express (PL/SQL)
- Grails (Groovy)
- Kepler (Lua)
- Rocket (Rust)
- OpenACS (Tcl)
- Phoenix (Elixir)
- SproutCore (JavaScript-Ruby)
- Yaws (Erlang)