Vue.js
Originalni autor(i) | Evan Ju |
---|---|
Prvo izdanje | oktobar 2014. |
Repozitorijum | |
Napisan u | TypeScript |
Veličina | 33.9 KB min+gzip[1] |
Licenca | MIT licenca |
Veb-sajt | vuejs |
Vue.Js (poznat i kao Vue [2]) je front-end JavaScript biblioteka za Model-view-viewmodel koja se koristi za kreiranje korisničkih interfejsa i aplikacija na jednoj stranici .[8] Ova biblioteka je kreirana od strane Evan You-a, a održavaju je on i ostali aktivni članovi uskog tima.[9]
Pregled
[uredi | uredi izvor]Vue.js koristi postepeno prilagodljivu arhitekturu koja se fokusira na deklarativni prikaz i kompoziciju komponenti. Osnovna biblioteka je usmerena isključivo na prikazni sloj.[2] Za napredne funkcionalnosti potrebne u složenim aplikacijama, kao što su rutiranje, upravljanje stanjem i alati za razvoj, koriste se zvanično održavani paketi i biblioteke.[10]
Vue.js omogućava proširenje HTML-a pomoću HTML atributa koji se zovu direktive. [11] Direktive pružaju funkcionalnost HTML aplikacijama mogu biti ugrađene ili korisnički definisane direktive.
Istorija
[uredi | uredi izvor]Vue je kreirao Evan You nakon rada za Google koristeći AngularJS u nekoliko projekata. Kasnije je opisao svoj proces razmišljanja na sledeći način: "Pomislio sam, šta kada bih mogao samo izdvojiti deo koji mi se zaista sviđao u vezi sa Angular-om i izgraditi nešto veoma lako."[12] Prvo ulaganje izvornog koda na projektu datira iz jula 2013. godine, a Vue je prvi put javno najavljen sledećeg februara, 2014. godine.
Imena verzija su često izvedena iz mange i animea.
Verzije
[uredi | uredi izvor]Verzija | Datum izlaska | Naslov | Kraj dugoročne podrške (LTS). | Kraj životnog veka |
---|---|---|---|---|
3.4 | 28. decembar 2023. | Slam Dunk[15] | ||
3.3 | 11. maj 2023. | Rurouni Kenshin[16] | ||
3.2 | 5. avgust 2021. | Quintessential Quintuplets[17] | ||
3.1 | 7. jun 2021. | Pluto[18] | ||
3.0 | 18. septembar 2020. | One Piece[19] | ||
2.7 | 1. jul 2022. | Naruto[20] | 31. decembar 2023. | 31. decembar 2023. |
2.6 | 4. februar 2019. | Macross[21] | 18. mart 2022. | 18. septembar 2023. |
2.5 | 13. oktobar 2017. | Level E[22] | ||
2.4 | 13. jul 2017. | Kill la Kill[23] | ||
2.3 | 27. april 2017. | JoJo's Bizarre Adventure[24] | ||
2.2 | 26. februar 2017. | Initial D[25] | ||
2.1 | 22. novembar 2016. | Hunter X Hunter[26] | ||
2.0 | 30. septembar 2016. | Ghost in the Shell[27] | ||
1.0 | 27. oktobar 2015. | Evangelion[28] | ||
0.12 | 12. jun 2015. | Dragon Ball[29] | ||
0.11 | 7. novembar 2014. | Cowboy Bebop[30] | ||
0.10 | 23. mart 2014. | Blade Runner[31] | ||
0.9 | 25. februar 2014. | Animatrix[32] | ||
0.8 | 27. januar 2014. | N/D[33] | prva verzija javno objavljena[13][14] | |
0.7 | 24. decembar 2013. | N/D[34] | ||
0.6 | 8. decembar 2013. | VueJS[35] |
Kada se objavi nova glavna verzija, na primer, v3.y.z, poslednje minorno izdanje, na primer, 2.x.y, postaće izdanje sa dugoročnom podrškom (LTS) u trajanju od 18 meseci (sa ispravkama grešaka i bezbednosnim zakrpama), a za sledećih 18 meseci biće u režimu održavanja (samo sa bezbednosnim zakrpama). [36]
Karakteristike
[uredi | uredi izvor]Komponente
[uredi | uredi izvor]Vue komponente proširuju osnovne HTML elemente kako bi uklopili preupotrebljivi kod. Na visokom nivou, komponente su prilagođeni elementi kojima Vue-ov kompilator pridružuje ponašanje. U Vue-u, komponent je u osnovi Vue instanca sa predefinisanim opcijama. [37] U sledećem delu koda se nalazi primer Vue komponenta[38]. Komponent prikazuje dugme i ispisuje broj puta kada je dugme kliknuto:
<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>
Šabloni
[uredi | uredi izvor]Vue koristi HTML-baziranu sintaksu šablona koja omogućava povezivanje renderovanog koja omogućava povezivanje renderovanog DOM-a sa podacima osnovne Vue instance. Svi Vue šabloni su važeći HTML koji mogu da se parsiraju od strane brauzera koji poštuje specifikacije i HTML parsere . Vue kompajlira šablone u funkcije virtuelnog DOM-a za renderovanje. Virtuelni model objekta dokumenta (ili "DOM") omogućava Vue-u da renderuje komponente u svojoj memoriji pre nego što ažurira pregledač. U kombinaciji sa sistemom reaktivnosti, Vue može da izračuna minimalni broj komponenti za ponovno renderovanje i da primeni minimalnu količinu manipulacije DOM-a kada se promeni stanje aplikacije.
Vue korisnici mogu koristiti sintaksu šablona ili izabrati da direktno pišu funkcije za renderovanje koristeći hiperskript, bilo pozivajući funkcije ili koristeći JSX. [39] Funkcije za renderovanje omogućavaju izgradnju aplikacija iz softverskih komponenti. [40]
Reaktivnost
[uredi | uredi izvor]Vue ima sistem reaktivnosti koji koristi obične JavaScript objekte i optimizovano ponovno renderovanje. Svaka komponenta prati svoje reaktivne zavisnosti tokom svog renderovanja, tako da sistem precizno zna kada da izvrši ponovno renderovanje i koje komponente da ponovo renderuje.[41]
Tranzicije
[uredi | uredi izvor]Vue pruža različite načine za primenu efekata tranzicije kada se stavke dodaju, ažuriraju ili uklone iz DOM-a . Ovo uključuje alate za:
- Automatski primenljive klase za CSS prelaze i animacije
- Integraciju biblioteka CSS animacija ostalih izvora, kao što je Animate.css
- Korišćenje JavaScripta-a za direktno manipulisanje DOM-om za vreme kuka za tranziciju
- Integrišite biblioteke JavaScripta animacija ostalih izvora, kao što jeVelocity.js
Kada se element umota u komponentu za tranziciju i ubaci ili ukloni, desi se sledeće:
- Vue će automatski detektovati da li ciljni element ima primenjene CSS tranzicije ili animacije. Ukoliko ih ima, CSS klase za tranziciju će biti dodate/uklonjene u odgovarajućim vremenima.
- Ukoliko komponenta za tranziciju pruža JavaScript hooks, biće pozvane u odgovarajućim vremenima.
- Ako nisu otkrivene CSS tranzicije/animacije i ako nisu pružene JavaScript hooks, operacije DOM-a za umetanje i/ili uklanjanje će biti izvršene odmah u sledećem frejmu. [42] [43]
Rutiranje
[uredi | uredi izvor]Tradicionalni nedostatak jednostraničkih aplikacija (SPA) je nemogućnost deljenja linkova do tačne "pod"stranice unutar određene veb stranice. Pošto SPA servira svojim korisnicima samo jedan odgovor zasnovan na URL-u sa servera (obično serviraju index.html ili index.vue), obeležavanje određenih ekrana ili deljenje linkova do specifičnih delova je obično teško, ako ne i nemoguće. Da bi se rešio ovaj problem, mnogi klijentski ruteri razdvajaju svoje dinamičke URL-ove sa "hašbengom" (#!), na primer, page.com/#!/. Međutim, sa HTML5, većina modernih pregledača podržava rutiranje bez hašbenga.
Vue pruža interfejs za promenu prikazanog sadržaja na stranici na osnovu trenutne putanje URL-a - bez obzira na to kako je promenjen (bilo putem linka poslatog imejlom, osvežavanja stranice ili linkova unutar stranice). Dodatno, korišćenjem front-end rutera omogućava se namerno menjanje putanje pregledača kada se dese određeni događaji u pregledaču (npr. kliktanje) na dugmadima ili linkovima. Vue sam po sebi ne dolazi sa rutiranjem preko haša. Međutim, open-source "vue-router" paket pruža API za ažuriranje URL-a aplikacije, podržava dugme za povratak (navigaciju kroz istoriju), kao i linkove za resetovanje lozinke ili potvrdu putem imejla sa parametrima URL-a za autentifikaciju. Podržava mapiranje ugnježdenih ruta na ugnježdene komponente i nudi detaljnu kontrolu tranzicije. Sa Vue-om, programeri već sastavljaju aplikacije pomoću malih građevinskih blokova koji grade veće komponente. Sa vue-router-om dodatim u mešavinu, komponente samo treba mapirati na rute kojima pripadaju, a roditeljske/rutne rute treba da pokazu gde deca treba da se renderuju. [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>
Kod iznad:
- Postavlja front-end rutu na
websitename.com/user/<id>
. - Koja će biti prikazana u korisničko definisanoj komponenti u (const User...)
- Omogućava komponenti Korisnik da prosledi određeni id korisnika koji je unet u URL koristeći ključ params objekta $route:
$route.params.id
. - Ovaj šablon (variraće u zavisnosti od parametara koji se prosleđuju u ruter) biće prikazan u
<router-view></router-view>
unutar div#app u DOM-u. - Finalno generisani HTML za nekoga ko ukuca:
websitename.com/user/1
biće:
<div id="app">
<div>
<div>User 1</div>
</div>
</div>
Ekosistem
[uredi | uredi izvor]Osnovna biblioteka ide u paketu sa alatima i bibliotekama koje su razvili osnovni tim i saradnici.
Zvanični alati
[uredi | uredi izvor]- Devtools – Proširenje alatki za debagovanje Vue.js aplikacija u pregledaču.
- Vite – Standardni alati za brzi razvoj Vue.js aplikacija. Vue Loader – učitavač veb paketa koji omogućava pisanje Vue komponenti u formatu koji se zove Single-File Components (SFCs)
Zvanične biblioteke
[uredi | uredi izvor]- Vue Router – Zvanični ruter
- Vuex – Centralizovano upravljanje inspirisano Flux-om
- Vue Server Renderer – Renderovanje na strani servera
- Pinia – Novo pojednostavljeno upravljanje stanjem
Vidi još
[uredi | uredi izvor]- Poređenje veb okvira zasnovanih na JavaScript-u
- React
- AngularJS
- Angular
- Quasar Framework
- Veb-frejmvork
- JavaScript biblioteka
- Model–view–ViewModel
- Nuxt.js
Reference
[uredi | uredi izvor]- ^ „@vue/runtime-dom v3.2.45”. Bundlephobia (na jeziku: engleski). Pristupljeno 2023-01-29.
- ^ a b v „Introduction”. Vuejs.org (na jeziku: engleski). Pristupljeno 3. 1. 2020.
- ^ Macrae, Callum (2018). Vue.js: Up and Running: Building Accessible and Performant Web Apps (na jeziku: engleski). 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 (na jeziku: engleski). Apress. ISBN 978-1-4842-3781-6.
- ^ Yerburgh, Edd (2019). Testing Vue.js Applications (na jeziku: engleski). Manning Publications. ISBN 978-1-61729-524-9.
- ^ Freeman, Adam (2018). Pro Vue.js 2 (na jeziku: engleski). 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 (na jeziku: engleski). SitePoint. ISBN 978-1-4920-7144-0.[mrtva veza]
- ^ [3][4][5][6][7][2]
- ^ „Meet the Team”. Vuejs.org (na jeziku: engleski). Pristupljeno 23. 9. 2019.
- ^ „Evan is creating Vue.js”. Patreon (na jeziku: engleski). Pristupljeno 11. 3. 2017.
- ^ „What is Vue.js”. W3Schools (na jeziku: engleski). Pristupljeno 21. 1. 2020.
- ^ „Evan You”. Between the Wires (na jeziku: engleski). 3. 11. 2016. Arhivirano iz originala 3. 6. 2017. g. Pristupljeno 26. 8. 2017.
- ^ a b „Vue.js: JavaScript MVVM made simple”. Hacker News. 2014-02-03. Pristupljeno 2023-01-29.
- ^ a b „First Week of Launching Vue.js”. Evan You. 2014-02-11. Pristupljeno 2023-01-29.
- ^ „Announcing Vue 3.4”. Vue.js. 28. 12. 2023. Pristupljeno 29. 3. 2024.
- ^ „v3.3.0 Rurouni Kenshin”. Vue.js (na jeziku: engleski). 11. 5. 2023. Pristupljeno 2023-05-12 — preko GitHub.
- ^ „v3.2.0 Quintessential Quintuplets”. Vue.js (na jeziku: engleski). 5. 8. 2021. Pristupljeno 10. 8. 2021 — preko GitHub.
- ^ „v3.1.0 Pluto”. Vue.js (na jeziku: engleski). 7. 6. 2021. Pristupljeno 18. 7. 2021 — preko GitHub.
- ^ „v3.0.0 One Piece”. Vue.js (na jeziku: engleski). 18. 9. 2020. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v2.7.0 Naruto”. Vue.js (na jeziku: engleski). 1. 7. 2022. Pristupljeno 1. 7. 2022 — preko GitHub.
- ^ „v2.6.0 Macross”. Vue.js (na jeziku: engleski). 4. 2. 2019. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v2.5.0 Level E”. Vue.js (na jeziku: engleski). 13. 10. 2017. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v2.4.0 Kill la Kill”. Vue.js (na jeziku: engleski). 13. 7. 2017. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v2.3.0 JoJo's Bizarre Adventure”. Vue.js (na jeziku: engleski). 27. 4. 2017. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v2.2.0 Initial D”. Vue.js (na jeziku: engleski). 26. 2. 2017. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v2.1.0 Hunter X Hunter”. Vue.js (na jeziku: engleski). 22. 11. 2016. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v2.0.0 Ghost in the Shell”. Vue.js (na jeziku: engleski). 30. 9. 2016. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „1.0.0 Evangelion”. Vue.js (na jeziku: engleski). 27. 10. 2015. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „0.12.0: Dragon Ball”. Vue.js (na jeziku: engleski). 12. 6. 2015. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v0.11.0: Cowboy Bebop”. Vue.js (na jeziku: engleski). 7. 11. 2014. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v0.10.0: Blade Runner”. Vue.js (na jeziku: engleski). 23. 3. 2014. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v0.9.0: Animatrix”. Vue.js (na jeziku: engleski). 25. 2. 2014. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v0.8.0”. Vue.js (na jeziku: engleski). 27. 1. 2014. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „v0.7.0”. Vue.js (na jeziku: engleski). 24. 12. 2013. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „0.6.0: VueJS”. Vue.js (na jeziku: engleski). 8. 12. 2013. Pristupljeno 23. 9. 2020 — preko GitHub.
- ^ „Vue Roadmap”. Vue.js (na jeziku: engleski). 6. 11. 2022 — preko GitHub.
- ^ „Components”. Vuejs.org (na jeziku: engleski). Pristupljeno 11. 3. 2017.
- ^ „Šta su Vue.js komponente?”. Web Programiranje (na jeziku: srpski). 2018-05-13. Pristupljeno 2024-04-09.
- ^ „Template Syntax”. Vuejs.org (na jeziku: engleski). Pristupljeno 11. 3. 2017.
- ^ „Vue 2.0 is Here!”. The Vue Point. 30. 9. 2016. Pristupljeno 11. 3. 2017.
- ^ „Reactivity in Depth”. Vuejs.org (na jeziku: engleski). Pristupljeno 11. 3. 2017.
- ^ „Transition Effects”. Vuejs.org (na jeziku: engleski). Pristupljeno 11. 3. 2017.
- ^ „Transitioning State”. Vuejs.org (na jeziku: engleski). Pristupljeno 11. 3. 2017.
- ^ „Routing”. Vuejs.org (na jeziku: engleski). Pristupljeno 11. 3. 2017.