Корисник:Milan Ristanovic/песак

С Википедије, слободне енциклопедије

Vue.js[уреди | уреди извор]

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

Vue.js
лого Vue.js
Оригинални називVue.js
Изговара сеВју џе ес
Појавио сефебруар 2014. год.; пре 10 година (2014-02)[3]
Аутор(и)Иван Ју
УтицајиTypeScript
Веб-сајтhttps://vuejs.org/

Преглед[уреди | уреди извор]

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 18. септембар 2020. One Piece [8]
2.6 4. фебруар 2019. Macross [9]
2.5 13. октобар 2017. Level E [10]
2.4 13. јул 2017. Kill la Kill [11]
2.3 27. април 2017. JoJo's Bizarre Adventure [12]
2.2 26. фебруар 2017. Initial D [13]
2.1 22. новембар 2016. Hunter X Hunter [14]
2.0 30. септембар 2016. Ghost in the Shell [15]
1.0 27. октобар 2015. Evangelion [16]
0.12 12. јун 2015. Dragon Ball [17]
0.11 7. новембар 2014. Cowboy Bebop [18]
0.10 23. март 2014. Blade Runner [19]
0.9 25. фебруар 2014. Animatrix [20]
0.8 27. јануар 2014.
0.7 24. децембар 2013.
0.6 8. децембар 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

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

  1. Vue.js ће аутоматски њушкати да ли циљни елемент има примењене CSS прелазе или анимације. Ако се то догоди, CSS прелазне класе ће се додати / уклонити у одговарајуће време.
  2. Ако је прелазна компонента обезбедила JavaScript hook-ове, ти ће се hook-ови позивати у одговарајуће време.
  3. Ако нису откривени 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>

Код изнад:

  1. Поставља фронт-енд руту на websitename.com/user/<id>
  2. Који ће се приказати у компоненти User дефинисаној у (const User ...)
  3. Омогућава корисничкој компоненти да проследи одређени ID корисника који је укуцан у URL адресу помоћу params кључа објекта $route: $route.params.id.
  4. Овај образац (у зависности од параметара прослеђених у рутер) биће приказан у<router-view></router-view> унутар DOM-ове div#app.
  5. Коначно генерисани 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

Погледајте још[уреди | уреди извор]

Референце[уреди | уреди извор]

  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. 
Преузето из „https://sr.wikipedia.org/w/index.php?title=Корисник:Milan_Ristanovic/песак&oldid=23790557”