Vue.js

Vue.js
Vue.js
	<img src="//up.wiki.x.io/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/121px-Vue.js_Logo_2.svg.png" decoding="async" width="121" height="105" class="mw-file-element" data-file-width="512" data-file-height="443"> лого Vue.js
Оригинални назив	Vue.js
Изговара се	Вју џе ес
Појавио се	фебруар 2014.; пре 10 година
Аутор(и)	Иван Ју
Утицаји	TypeScript
Веб-сајт	https://vuejs.org/

Vue.js (преведено на српски као Вју.џе-ес) је фрејмворк (енгл. framework) типа отвореног софтвера (енгл. open-source) model–view–viewmodel модел орјентисан на фронт-енд (енгл. front end) Јаваскрипт (енгл.JavaScript) фрејмворк за прављење интерфејса (енгл. interfaces) ка крајњем кориснику и апликација које садрже само једну страну^[1] (тзв. енгл. single-page applications). Овај фрејмворк направљен је од стране Иван Јуа, а на његовом оодржавању раде он и остатак чланова развојног тима.^[2]

Преглед

Vue.js одликује се инкрементално прилагодљивом архитектуром која се фокусира на декларативно приказивање и састав компонената. Основна библиотека је фокусирана само на слој приказа^[4]. Напредне функције потребне за сложене апликације попут рутирања, управљања стањем и алата за изградњу нуде се путем званично одржаваних пратећих библиотека и пакета^[5], уз Nuxt.js као једно од најпопуларнијих решења.

Vue.js вам омогућава да проширите HTML помоћу HTML атрибута који се зову директиве^[6]. Директиве нуде функционалност HTML апликацијама и долазе у виду уграђених или кориснички дефинисаних директива.

Историја

Vue.js је креирао Иван Ју након што је радио за Google користећи AngularJS у бројним пројектима. Касније је резимирао свој процес размишљања: „Схватио сам, шта ако бих могао само да издвојим део који ми се заиста свидео у Angular-у и да направим нешто заиста лагано^[7].“ Прво предавање изворног кода пројекту датирано је на јул 2013. године, а Vue.js је први пут објављен следећег фебруара 2014. године.

Верзије

Version	Release date	Title
3.0	000000002020-09-18-000018. септембар 2020.	One Piece ^[8]
2.6	000000002019-02-04-00004. фебруар 2019.	Macross ^[9]
2.5	000000002017-10-13-000013. октобар 2017.	Level E ^[10]
2.4	000000002017-07-13-000013. јул 2017.	Kill la Kill ^[11]
2.3	000000002017-04-27-000027. април 2017.	JoJo's Bizarre Adventure ^[12]
2.2	000000002017-02-26-000026. фебруар 2017.	Initial D ^[13]
2.1	000000002016-11-22-000022. новембар 2016.	Hunter X Hunter ^[14]
2.0	000000002016-09-30-000030. септембар 2016.	Ghost in the Shell ^[15]
1.0	000000002015-10-27-000027. октобар 2015.	Evangelion ^[16]
0.12	000000002015-06-12-000012. јун 2015.	Dragon Ball ^[17]
0.11	000000002014-11-07-00007. новембар 2014.	Cowboy Bebop ^[18]
0.10	000000002014-03-23-000023. март 2014.	Blade Runner ^[19]
0.9	000000002014-02-25-000025. фебруар 2014.	Animatrix ^[20]
0.8	000000002014-01-27-000027. јануар 2014.
0.7	000000002013-12-24-000024. децембар 2013.
0.6	000000002013-12-08-00008. децембар 2013.	VueJS ^[21]

Карактеристике

Компоненте

Vue.js компоненте проширују основне HTML елементе да би енкапсулирали вишекратну употребу кода. На високом нивоу, компоненте су прилагођени елементи којима Vue.js-ов компајлер веже понашање. У Vue.js-у је компонента у основи Vue.js-инстанца са унапред дефинисаним опцијама^[22]. Исечак кода у наставку садржи пример Vue.js компоненте. Компонента представља дугме и исписује број кликова на дугме:

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

Темплејти (Шаблони)

Vue.js користи синтаксу шаблона засновану на HTML -у која омогућава везивање приказаног DOM-а на податке основне Vue.js инстанце. Сви Vue.js шаблони су важећи HTML који могу да се рашчлане помоћу прегледача који одговарају спецификацијама и HTML рашчлањивача. Vue.js компајлира предлошке у функције виртуелног DOMприказивања. Виртуелни модел објекта докумената (енгл. „DOM“) омогућава Vue.js -у да приказује компоненте у својој меморији пре ажурирања прегледача. У комбинацији са системом реактивности, Vue.js је у стању да израчуна минимални број компонената за поновно приказивање и примени минималну количину DOM манипулација када се стање апликације промени.

Корисници Vue.js-а могу да користе синтаксу шаблона или да одаберу директно писање функција приказивања помоћу хиперскрипта било путем позива функције или JSX-а. Функције приказивања омогућавају изградњу апликације од софтверских компоненти.

Реактивност

Vue.js садржи систем реактивности који користи обичне JavaScript објекте и оптимизовано поновно приказивање. Свака компонента прати своје реактивне зависности током приказивања, тако да систем тачно зна када се поново приказује и које компоненте треба поново приказати^[23].

Прелази

Vue.js пружа разне начине за примену ефеката преласка када се ставке убаце, ажурирају или уклоне из DOM-а. То укључује алате за:

Аутоматски примени часове за CSS прелазе и анимације
Интегришите независне библиотеке CSS анимација, као што је Animate.css
Користите JavaScript за директну манипулацију DOM-ом током прелазних кука
Интегришите библиотеке JavaScript анимација независних произвођача, као што је Velocity.js

Када се елемент умотан у прелазну компоненту уметне или уклони, догађа се следеће:

Vue.js ће аутоматски њушкати да ли циљни елемент има примењене CSS прелазе или анимације. Ако се то догоди, CSS прелазне класе ће се додати / уклонити у одговарајуће време.
Ако је прелазна компонента обезбедила JavaScript hook-ове, ти ће се hook-ови позивати у одговарајуће време.
Ако нису откривени CSSпрелази / анимације и нису обезбеђене JavaScript hook-ови, DOM операције за уметање и / или уклањање извршиће се одмах на следећем оквиру.^[24]^[25]

Усмеравање

Традиционални недостатак једностраничних апликација (енгл. single-page applications (SPAs)) је немогућност дељења веза до тачне „под“ странице унутар одређене веб странице. Будући да SPA услуге својим корисницима сервирају само један одговор заснован на URL-у (обично служи index..html или index.vue.), обележавање одређених екрана или дељење веза до одређених одељака обично је тешко, ако не и немогуће. Да би решили овај проблем, многи рутери на страни клијента ограничавају своје динамичке URL адресе помоћу „hashbang“ (#!), Нпр. page.com/#!/. Међутим, са HTML5 већина модерних прегледача подржава усмеравање без hashbang-a.

Vue.js пружа интерфејс за промену онога што се приказује на страници на основу тренутне путање URL-а - без обзира на то како је промењено (било путем везе е-поштом, освежавања или веза унутар странице). Поред тога, коришћење предњег рутера омогућава намерни прелаз путање прегледача када се на тастерима или везама појаве одређени догађаји у прегледачу (тј. Кликови). Сам Vue.js не долази са хешираним усмеравањем на предњој страни. Али пакет отвореног кода „vue-router“ пружа API за ажурирање URL-а апликације, подржава дугме за повратак (навигација у историји) и ресетовање лозинке за е-пошту или везе за верификацију е-поште са параметрима URL-а за потврду идентитета. Подржава мапирање угнежdених рута у угнежdене компоненте и нуди фино зрнасту контролу преласка. Уз Vue.js, програмери већ састављају апликације са малим грађевинским блоковима који граде веће компоненте. Са додавањем Vue-router-a у микс, компоненте морају само да се мапирају на руте којима припадају, а родитељске руте морају да назначе где деца треба да се прикажу^[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>

Код изнад:

Поставља фронт-енд руту на websitename.com/user/<id>
Који ће се приказати у компоненти User дефинисаној у (const User ...)
Омогућава корисничкој компоненти да проследи одређени ID корисника који је укуцан у URL адресу помоћу params кључа објекта $route: $route.params.id.
Овај образац (у зависности од параметара прослеђених у рутер) биће приказан у<router-view></router-view> унутар DOM-ове div#app.
Коначно генерисани HTML за некога ко укуца:websitename.com/user/1 биће:^[27]

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

Екосистем

Основна библиотека долази са алатима и библиотекама које су развили главни тим и сарадници.

Званични алат

Devtools – Претраживач грешака devtools је додатак за Vue.js апликације
Vue CLI – Стандардни алат за врзо Vue.js развијање
Vue Loader – омогућава писaње Vue компоненти у формату који се зове енгл.Single-File Components (SFCs)

Званичне библиотеке

Vue Router – Званичан рутер за Vue.js
Vuex – Централизовани менаџмент инспирисан флуксом за Vue.js
Vue Server Renderer – Приказ са серверске стране за Vue.js

Погледајте још

Референце

^ 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.
^ „Meet the Team — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.
^ „First Week of Launching Vue.js”. Evan You.
^ „Introduction — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.
^ „Evan is creating Vue.js”. Patreon (на језику: енглески). Приступљено 2021-05-06.
^ „What is Vue.js”. www.w3schools.com. Приступљено 2021-05-06.
^ „Between the Wires”. Between the Wires (на језику: енглески). Приступљено 2021-05-06.
^ „v3.0.0 One Piece”. GitHub. 2020-09-18. Приступљено 2020-09-23.
^ „v2.6.0 Macross”. GitHub. 2019-02-04. Приступљено 2020-09-23.
^ „v2.5.0 Level E”. GitHub. 2017-10-13. Приступљено 2020-09-23.
^ „v2.4.0 Kill la Kill”. GitHub. 2017-07-13. Приступљено 2020-09-23.
^ „v2.3.0 JoJo's Bizarre Adventure”. GitHub. 2017-04-27. Приступљено 2020-09-23.
^ „v2.2.0 Initial D”. GitHub. 2017-02-26. Приступљено 2020-09-23.
^ „v2.1.0 Hunter X Hunter”. GitHub. 2016-11-22. Приступљено 2020-09-23.
^ „v2.0.0 Ghost in the Shell”. GitHub. 2016-09-30. Приступљено 2020-09-23.
^ „1.0.0 Evangelion”. GitHub. 2015-10-27. Приступљено 2020-09-23.
^ „0.12.0: Dragon Ball”. GitHub. 2015-06-12. Приступљено 2020-09-23.
^ „v0.11.0: Cowboy Bebop”. GitHub. 2014-11-07. Приступљено 2020-09-23.
^ „v0.10.0: Blade Runner”. GitHub. 2014-03-23. Приступљено 2020-09-23.
^ „v0.9.0: Animatrix”. GitHub. 2014-02-25. Приступљено 2020-09-23.
^ „0.6.0: VueJS”. GitHub. 2013-12-08. Приступљено 2020-09-23.
^ „Components Basics — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.
^ „Reactivity in Depth — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.
^ „Enter/Leave & List Transitions — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.
^ „State Transitions — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.
^ „Routing — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.
^ „Nested Routes | Vue Router”. router.vuejs.org. Приступљено 2021-05-06.

[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 (на језику: енглески). Приступљено 2021-05-06.

[3] „First Week of Launching Vue.js”. Evan You.

[4] „Introduction — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.

[5] „Evan is creating Vue.js”. Patreon (на језику: енглески). Приступљено 2021-05-06.

[6] „What is Vue.js”. www.w3schools.com. Приступљено 2021-05-06.

[7] „Between the Wires”. Between the Wires (на језику: енглески). Приступљено 2021-05-06.

[8] „v3.0.0 One Piece”. GitHub. 2020-09-18. Приступљено 2020-09-23.

[9] „v2.6.0 Macross”. GitHub. 2019-02-04. Приступљено 2020-09-23.

[10] „v2.5.0 Level E”. GitHub. 2017-10-13. Приступљено 2020-09-23.

[11] „v2.4.0 Kill la Kill”. GitHub. 2017-07-13. Приступљено 2020-09-23.

[12] „v2.3.0 JoJo's Bizarre Adventure”. GitHub. 2017-04-27. Приступљено 2020-09-23.

[13] „v2.2.0 Initial D”. GitHub. 2017-02-26. Приступљено 2020-09-23.

[14] „v2.1.0 Hunter X Hunter”. GitHub. 2016-11-22. Приступљено 2020-09-23.

[15] „v2.0.0 Ghost in the Shell”. GitHub. 2016-09-30. Приступљено 2020-09-23.

[16] „1.0.0 Evangelion”. GitHub. 2015-10-27. Приступљено 2020-09-23.

[17] „0.12.0: Dragon Ball”. GitHub. 2015-06-12. Приступљено 2020-09-23.

[18] „v0.11.0: Cowboy Bebop”. GitHub. 2014-11-07. Приступљено 2020-09-23.

[19] „v0.10.0: Blade Runner”. GitHub. 2014-03-23. Приступљено 2020-09-23.

[20] „v0.9.0: Animatrix”. GitHub. 2014-02-25. Приступљено 2020-09-23.

[21] „0.6.0: VueJS”. GitHub. 2013-12-08. Приступљено 2020-09-23.

[22] „Components Basics — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.

[23] „Reactivity in Depth — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.

[24] „Enter/Leave & List Transitions — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.

[25] „State Transitions — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.

[26] „Routing — Vue.js”. vuejs.org (на језику: енглески). Приступљено 2021-05-06.

[27] „Nested Routes | Vue Router”. router.vuejs.org. Приступљено 2021-05-06.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

Корисник:Милан Ристановиц/песак

Садржај