Википедија

Korisnik:Milan Ristanovic/pesak

Vue.js

uredi

Vue.js (prevedeno na srpski kao Vju.dže-es) je frejmvork (engl. framework) tipa otvorenog softvera (engl. open-source) model–view–viewmodel model orjentisan na front-end (engl. front end) Javaskript (engl.JavaScript) frejmvork za pravljenje interfejsa (engl. interfaces) ka krajnjem korisniku i aplikacija koje sadrže samo jednu stranu[1] (tzv. engl. single-page applications). Ovaj frejmvork napravljen je od strane Ivan Jua, a na njegovom oodržavanju rade on i ostatak članova razvojnog tima.[2]

Vue.js
 
logo Vue.js
Originalni nazivVue.js
Izgovara seVju dže es
Pojavio sefebruar 2014.; pre 10 godina (2014-02)[3]
Autor(i)Ivan Ju
UticajiTypeScript
Veb-sajthttps://vuejs.org/

Pregled

uredi

Vue.js odlikuje se inkrementalno prilagodljivom arhitekturom koja se fokusira na deklarativno prikazivanje i sastav komponenata. Osnovna biblioteka je fokusirana samo na sloj prikaza[4]. Napredne funkcije potrebne za složene aplikacije poput rutiranja, upravljanja stanjem i alata za izgradnju nude se putem zvanično održavanih pratećih biblioteka i paketa[5], uz Nuxt.js kao jedno od najpopularnijih rešenja.

Vue.js vam omogućava da proširite HTML pomoću HTML atributa koji se zovu direktive[6]. Direktive nude funkcionalnost HTML aplikacijama i dolaze u vidu ugrađenih ili korisnički definisanih direktiva.

Istorija

uredi

Vue.js je kreirao Ivan Ju nakon što je radio za Google koristeći AngularJS u brojnim projektima. Kasnije je rezimirao svoj proces razmišljanja: „Shvatio sam, šta ako bih mogao samo da izdvojim deo koji mi se zaista svideo u Angular-u i da napravim nešto zaista lagano[7].“ Prvo predavanje izvornog koda projektu datirano je na jul 2013. godine, a Vue.js je prvi put objavljen sledećeg februara 2014. godine.

Verzije

uredi
Version Release date Title
3.0 18. septembar 2020. One Piece [8]
2.6 4. februar 2019. Macross [9]
2.5 13. oktobar 2017. Level E [10]
2.4 13. jul 2017. Kill la Kill [11]
2.3 27. april 2017. JoJo's Bizarre Adventure [12]
2.2 26. februar 2017. Initial D [13]
2.1 22. novembar 2016. Hunter X Hunter [14]
2.0 30. septembar 2016. Ghost in the Shell [15]
1.0 27. oktobar 2015. Evangelion [16]
0.12 12. jun 2015. Dragon Ball [17]
0.11 7. novembar 2014. Cowboy Bebop [18]
0.10 23. mart 2014. Blade Runner [19]
0.9 25. februar 2014. Animatrix [20]
0.8 27. januar 2014.
0.7 24. decembar 2013.
0.6 8. decembar 2013. VueJS [21]

Karakteristike

uredi

Komponente

uredi

Vue.js komponente proširuju osnovne HTML elemente da bi enkapsulirali višekratnu upotrebu koda. Na visokom nivou, komponente su prilagođeni elementi kojima Vue.js-ov kompajler veže ponašanje. U Vue.js-u je komponenta u osnovi Vue.js-instanca sa unapred definisanim opcijama[22]. Isečak koda u nastavku sadrži primer Vue.js komponente. Komponenta predstavlja dugme i ispisuje broj klikova na dugme: 

<template>
  <div id="tuto">
    <button-clicked v-bind:initial-count="0"></button-clicked>
  </div>
</template>

<script>
Vue.component('button-clicked', {
  props: ['initialCount'],
  data: () => ({
    count: 0,
  }),
  template: '<button v-on:click="onClick">Clicked {{ count }} times</button>',
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
    }
  },
  methods: {
    onClick() {
      this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

new Vue({
  el: '#tuto',
});
</script>

Templejti (Šabloni)

uredi

Vue.js koristi sintaksu šablona zasnovanu na HTML -u koja omogućava vezivanje prikazanog DOM-a na podatke osnovne Vue.js instance. Svi Vue.js šabloni su važeći HTML koji mogu da se raščlane pomoću pregledača koji odgovaraju specifikacijama i HTML raščlanjivača. Vue.js kompajlira predloške u funkcije virtuelnog DOMprikazivanja. Virtuelni model objekta dokumenata (engl. „DOM“) omogućava Vue.js -u da prikazuje komponente u svojoj memoriji pre ažuriranja pregledača. U kombinaciji sa sistemom reaktivnosti, Vue.js je u stanju da izračuna minimalni broj komponenata za ponovno prikazivanje i primeni minimalnu količinu DOM manipulacija kada se stanje aplikacije promeni.

Korisnici Vue.js-a mogu da koriste sintaksu šablona ili da odaberu direktno pisanje funkcija prikazivanja pomoću hiperskripta bilo putem poziva funkcije ili JSX-a. Funkcije prikazivanja omogućavaju izgradnju aplikacije od softverskih komponenti.

Reaktivnost

uredi

Vue.js sadrži sistem reaktivnosti koji koristi obične JavaScript objekte i optimizovano ponovno prikazivanje. Svaka komponenta prati svoje reaktivne zavisnosti tokom prikazivanja, tako da sistem tačno zna kada se ponovo prikazuje i koje komponente treba ponovo prikazati[23].

Prelazi

uredi

Vue.js pruža razne načine za primenu efekata prelaska kada se stavke ubace, ažuriraju ili uklone iz DOM-a. To uključuje alate za:

  • Automatski primeni časove za CSS prelaze i animacije
  • Integrišite nezavisne biblioteke CSS animacija, kao što je Animate.css
  • Koristite JavaScript za direktnu manipulaciju DOM-om tokom prelaznih kuka
  • Integrišite biblioteke JavaScript animacija nezavisnih proizvođača, kao što je Velocity.js

Kada se element umotan u prelaznu komponentu umetne ili ukloni, događa se sledeće:

  1. Vue.js će automatski njuškati da li ciljni element ima primenjene CSS prelaze ili animacije. Ako se to dogodi, CSS prelazne klase će se dodati / ukloniti u odgovarajuće vreme.
  2. Ako je prelazna komponenta obezbedila JavaScript hook-ove, ti će se hook-ovi pozivati u odgovarajuće vreme.
  3. Ako nisu otkriveni CSSprelazi / animacije i nisu obezbeđene JavaScript hook-ovi, DOM operacije za umetanje i / ili uklanjanje izvršiće se odmah na sledećem okviru.[24][25]

Usmeravanje

uredi

Tradicionalni nedostatak jednostraničnih aplikacija (engl. single-page applications (SPAs)) je nemogućnost deljenja veza do tačne „pod“ stranice unutar određene veb stranice. Budući da SPA usluge svojim korisnicima serviraju samo jedan odgovor zasnovan na URL-u (obično služi index..html ili index.vue.), obeležavanje određenih ekrana ili deljenje veza do određenih odeljaka obično je teško, ako ne i nemoguće. Da bi rešili ovaj problem, mnogi ruteri na strani klijenta ograničavaju svoje dinamičke URL adrese pomoću „hashbang“ (#!), Npr. page.com/#!/. Međutim, sa HTML5 većina modernih pregledača podržava usmeravanje bez hashbang-a.

Vue.js pruža interfejs za promenu onoga što se prikazuje na stranici na osnovu trenutne putanje URL-a - bez obzira na to kako je promenjeno (bilo putem veze e-poštom, osvežavanja ili veza unutar stranice). Pored toga, korišćenje prednjeg rutera omogućava namerni prelaz putanje pregledača kada se na tasterima ili vezama pojave određeni događaji u pregledaču (tj. Klikovi). Sam Vue.js ne dolazi sa heširanim usmeravanjem na prednjoj strani. Ali paket otvorenog koda „vue-router“ pruža API za ažuriranje URL-a aplikacije, podržava dugme za povratak (navigacija u istoriji) i resetovanje lozinke za e-poštu ili veze za verifikaciju e-pošte sa parametrima URL-a za potvrdu identiteta. Podržava mapiranje ugneždenih ruta u ugneždene komponente i nudi fino zrnastu kontrolu prelaska. Uz Vue.js, programeri već sastavljaju aplikacije sa malim građevinskim blokovima koji grade veće komponente. Sa dodavanjem Vue-router-a u miks, komponente moraju samo da se mapiraju na rute kojima pripadaju, a roditeljske rute moraju da naznače gde deca treba da se prikažu[26]. 

<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. Koji će se prikazati u komponenti User definisanoj u (const User ...)
  3. Omogućava korisničkoj komponenti da prosledi određeni ID korisnika koji je ukucan u URL adresu pomoću params ključa objekta $route: $route.params.id.
  4. Ovaj obrazac (u zavisnosti od parametara prosleđenih u ruter) biće prikazan u<router-view></router-view> unutar DOM-ove div#app.
  5. Konačno generisani HTML za nekoga ko ukuca:websitename.com/user/1 biće:[27]
<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

Ekosistem

uredi

Osnovna biblioteka dolazi sa alatima i bibliotekama koje su razvili glavni tim i saradnici.

Zvanični alat

uredi
  • Devtools – Pretraživač grešaka devtools je dodatak za Vue.js aplikacije
  • Vue CLI – Standardni alat za vrzo Vue.js razvijanje
  • Vue Loader – omogućava pisanje Vue komponenti u formatu koji se zove engl.Single-File Components (SFCs)

Zvanične biblioteke

uredi
  • Vue Router – Zvaničan ruter za Vue.js
  • Vuex – Centralizovani menadžment inspirisan fluksom za Vue.js
  • Vue Server Renderer – Prikaz sa serverske strane za Vue.js

Pogledajte još

uredi

Reference

uredi
  1. ^ Macrae, Callum (2018). Vue.js: Up and Running : Building Accessible and Performant Web Apps. [Place of publication not identified]. ISBN 978-1-4919-9721-5. OCLC 1025327529. 
  2. ^ „Meet the Team — Vue.js”. vuejs.org (na jeziku: engleski). Pristupljeno 2021-05-06. 
  3. ^ „First Week of Launching Vue.js”. Evan You. 
  4. ^ „Introduction — Vue.js”. vuejs.org (na jeziku: engleski). Pristupljeno 2021-05-06. 
  5. ^ „Evan is creating Vue.js”. Patreon (na jeziku: engleski). Pristupljeno 2021-05-06. 
  6. ^ „What is Vue.js”. www.w3schools.com. Pristupljeno 2021-05-06. 
  7. ^ „Between the Wires”. Between the Wires (na jeziku: engleski). Pristupljeno 2021-05-06. 
  8. ^ „v3.0.0 One Piece”. GitHub. 2020-09-18. Pristupljeno 2020-09-23. 
  9. ^ „v2.6.0 Macross”. GitHub. 2019-02-04. Pristupljeno 2020-09-23. 
  10. ^ „v2.5.0 Level E”. GitHub. 2017-10-13. Pristupljeno 2020-09-23. 
  11. ^ „v2.4.0 Kill la Kill”. GitHub. 2017-07-13. Pristupljeno 2020-09-23. 
  12. ^ „v2.3.0 JoJo's Bizarre Adventure”. GitHub. 2017-04-27. Pristupljeno 2020-09-23. 
  13. ^ „v2.2.0 Initial D”. GitHub. 2017-02-26. Pristupljeno 2020-09-23. 
  14. ^ „v2.1.0 Hunter X Hunter”. GitHub. 2016-11-22. Pristupljeno 2020-09-23. 
  15. ^ „v2.0.0 Ghost in the Shell”. GitHub. 2016-09-30. Pristupljeno 2020-09-23. 
  16. ^ „1.0.0 Evangelion”. GitHub. 2015-10-27. Pristupljeno 2020-09-23. 
  17. ^ „0.12.0: Dragon Ball”. GitHub. 2015-06-12. Pristupljeno 2020-09-23. 
  18. ^ „v0.11.0: Cowboy Bebop”. GitHub. 2014-11-07. Pristupljeno 2020-09-23. 
  19. ^ „v0.10.0: Blade Runner”. GitHub. 2014-03-23. Pristupljeno 2020-09-23. 
  20. ^ „v0.9.0: Animatrix”. GitHub. 2014-02-25. Pristupljeno 2020-09-23. 
  21. ^ „0.6.0: VueJS”. GitHub. 2013-12-08. Pristupljeno 2020-09-23. 
  22. ^ „Components Basics — Vue.js”. vuejs.org (na jeziku: engleski). Pristupljeno 2021-05-06. 
  23. ^ „Reactivity in Depth — Vue.js”. vuejs.org (na jeziku: engleski). Pristupljeno 2021-05-06. 
  24. ^ „Enter/Leave & List Transitions — Vue.js”. vuejs.org (na jeziku: engleski). Pristupljeno 2021-05-06. 
  25. ^ „State Transitions — Vue.js”. vuejs.org (na jeziku: engleski). Pristupljeno 2021-05-06. 
  26. ^ „Routing — Vue.js”. vuejs.org (na jeziku: engleski). Pristupljeno 2021-05-06. 
  27. ^ „Nested Routes | Vue Router”. router.vuejs.org. Pristupljeno 2021-05-06. 
Preuzeto iz „https://sr.wiki.x.io/w/index.php?title=Корисник:Milan_Ristanovic/песак&oldid=23790557”