Vue.js

Vue.js

Originalni autor(i)	Evan Ju
Prvo izdanje	oktobar 2014. god. (2014-10)
Repozitorijum	github.com/vuejs/core
Napisan u	TypeScript
Veličina	33.9 KB min+gzip
Licenca	MIT licenca
Veb-sajt	vuejs.org

Vue.Js (poznat i kao Vue ) je front-end JavaScript biblioteka za Model-view-viewmodel koja se koristi za kreiranje korisničkih interfejsa i aplikacija na jednoj stranici . Ova biblioteka je kreirana od strane Evan You-a, a održavaju je on i ostali aktivni članovi uskog tima.

Pregled

Vue.js koristi postepeno prilagodljivu arhitekturu koja se fokusira na deklarativni prikaz i kompoziciju komponenti. Osnovna biblioteka je usmerena isključivo na prikazni sloj. 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.

Vue.js omogućava proširenje HTML-a pomoću HTML atributa koji se zovu direktive. Direktive pružaju funkcionalnost HTML aplikacijama mogu biti ugrađene ili korisnički definisane direktive.

Istorija

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." 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

Verzija	Datum izlaska	Naslov	Kraj dugoročne podrške (LTS).	Kraj životnog veka
3.4	000000002023-12-28-000028. decembar 2023.	Slam Dunk
3.3	000000002023-05-11-000011. maj 2023.	Rurouni Kenshin
3.2	000000002021-08-05-00005. avgust 2021.	Quintessential Quintuplets
3.1	000000002021-06-07-00007. jun 2021.	Pluto
3.0	000000002020-09-18-000018. septembar 2020.	One Piece
2.7	000000002022-07-01-00001. jul 2022.	Naruto	000000002023-12-31-000031. decembar 2023.	000000002023-12-31-000031. decembar 2023.
2.6	000000002019-02-04-00004. februar 2019.	Macross	000000002022-03-18-000018. mart 2022.	000000002023-09-18-000018. septembar 2023.
2.5	000000002017-10-13-000013. oktobar 2017.	Level E
2.4	000000002017-07-13-000013. jul 2017.	Kill la Kill
2.3	000000002017-04-27-000027. april 2017.	JoJo's Bizarre Adventure
2.2	000000002017-02-26-000026. februar 2017.	Initial D
2.1	000000002016-11-22-000022. novembar 2016.	Hunter X Hunter
2.0	000000002016-09-30-000030. septembar 2016.	Ghost in the Shell
1.0	000000002015-10-27-000027. oktobar 2015.	Evangelion
0.12	000000002015-06-12-000012. jun 2015.	Dragon Ball
0.11	000000002014-11-07-00007. novembar 2014.	Cowboy Bebop
0.10	000000002014-03-23-000023. mart 2014.	Blade Runner
0.9	000000002014-02-25-000025. februar 2014.	Animatrix
0.8	000000002014-01-27-000027. januar 2014.	N/D	prva verzija javno objavljena
0.7	000000002013-12-24-000024. decembar 2013.	N/D
0.6	000000002013-12-08-00008. decembar 2013.	VueJS

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).

Karakteristike

Komponente

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. U sledećem delu koda se nalazi primer Vue komponenta. 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

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. Funkcije za renderovanje omogućavaju izgradnju aplikacija iz softverskih komponenti.

Reaktivnost

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.

Tranzicije

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:

1. 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.
2. Ukoliko komponenta za tranziciju pruža JavaScript hooks, biće pozvane u odgovarajućim vremenima.
3. 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.

Rutiranje

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.

<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:

1. Postavlja front-end rutu na websitename.com/user/<id> .
2. Koja će biti prikazana u korisničko definisanoj komponenti u (const User...)
3. Omogućava komponenti Korisnik da prosledi određeni id korisnika koji je unet u URL koristeći ključ params objekta $route: $route.params.id .
4. 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.
5. Finalno generisani HTML za nekoga ko ukuca: websitename.com/user/1 biće:

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

Ekosistem

Osnovna biblioteka ide u paketu sa alatima i bibliotekama koje su razvili osnovni tim i saradnici.

Zvanični alati

• 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

• 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š

• Poređenje veb okvira zasnovanih na JavaScript-u
• React
• AngularJS
• Angular
• Quasar Framework
• Veb-frejmvork
• JavaScript biblioteka
• Model–view–ViewModel
• Nuxt.js

Spoljašnje veze

• Zvanični veb-sajt
• Šta je Vue.js