Vue.js

Vue.js
Оригинални аутор(и)Еван Ју
Прво издањеоктобар 2014.; пре 10 година (2014-10)
Репозиторијум
Уреди на Википодацима
Написан уTypeScript
Величина33.9 KB min+gzip[1]
ЛиценцаМИТ лиценца
Веб-сајтvuejs.org

Vue.Js (познат и као Vue [2]) је front-end JavaScript библиотека за Model-view-viewmodel која се користи за креирање корисничких интерфејса и апликација на једној страници .[8] Ова библиотека је креирана од стране Evan You-а, а одржавају је он и остали активни чланови уског тима.[9]

Преглед

Vue.js користи постепено прилагодљиву архитектуру која се фокусира на декларативни приказ и композицију компоненти. Основна библиотека је усмерена искључиво на приказни слој.[2] За напредне функционалности потребне у сложеним апликацијама, као што су рутирање, управљање стањем и алати за развој, користе се званично одржавани пакети и библиотеке.[10]

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

Историја

Vue је креирао Evan You након рада за Google користећи AngularJS у неколико пројеката. Касније је описао свој процес размишљања на следећи начин: "Помислио сам, шта када бих могао само издвојити део који ми се заиста свиђао у вези са Angular-ом и изградити нешто веома лако."[12] Прво улагање изворног кода на пројекту датира из јула 2013. године, а Vue је први пут јавно најављен следећег фебруара, 2014. godine.

[13] [14]

Имена верзија су често изведена из манге и анимеа.

Верзије

Верзија Датум изласка Наслов Крај дугорочне подршке (LTS). Крај животног века
3.4 28. децембар 2023. Slam Dunk[15]
3.3 11. мај 2023. Rurouni Kenshin[16]
3.2 5. август 2021. Quintessential Quintuplets[17]
3.1 7. јун 2021. Pluto[18]
3.0 18. септембар 2020. One Piece[19]
2.7 1. јул 2022. Naruto[20] 31. децембар 2023. 31. децембар 2023.
2.6 4. фебруар 2019. Macross[21] 18. март 2022. 18. септембар 2023.
2.5 13. октобар 2017. Level E[22]
2.4 13. јул 2017. Kill la Kill[23]
2.3 27. април 2017. JoJo's Bizarre Adventure[24]
2.2 26. фебруар 2017. Initial D[25]
2.1 22. новембар 2016. Hunter X Hunter[26]
2.0 30. септембар 2016. Ghost in the Shell[27]
1.0 27. октобар 2015. Evangelion[28]
0.12 12. јун 2015. Dragon Ball[29]
0.11 7. новембар 2014. Cowboy Bebop[30]
0.10 23. март 2014. Blade Runner[31]
0.9 25. фебруар 2014. Animatrix[32]
0.8 27. јануар 2014. Н/Д[33] прва верзија јавно објављена[13][14]
0.7 24. децембар 2013. Н/Д[34]
0.6 8. децембар 2013. VueJS[35]

Када се објави нова главна верзија, на пример, v3.y.z, последње минорно издање, на пример, 2.x.y, постаће издање са дугорочном подршком (LTS) у трајању од 18 месеци (са исправкама грешака и безбедносним закрпама), а за следећих 18 месеци биће у режиму одржавања (само са безбедносним закрпама). [36]

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

Компоненте

Vue компоненте проширују основне HTML елементе како би уклопили преупотребљиви код. На високом нивоу, компоненте су прилагођени елементи којима Вue-ов компилатор придружује понашање. У Vue-у, компонент је у основи Vue инстанца са предефинисаним опцијама. [37] У следећем делу кода се налази пример Vue компонента[38]. Компонент приказује дугме и исписује број пута када је дугме кликнуто:

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

Шаблони

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

Vue корисници могу користити синтаксу шаблона или изабрати да директно пишу функције за рендеровање користећи хиперскрипт, било позивајући функције или користећи JSX. [39] Функције за рендеровање омогућавају изградњу апликација из софтверских компоненти. [40]

Реактивност

Vue има систем реактивности који користи обичне JavaScript објекте и оптимизовано поновно рендеровање. Свака компонента прати своје реактивне зависности током свог рендеровања, тако да систем прецизно зна када да изврши поновно рендеровање и које компоненте да поново рендерује.[41]

Транзиције

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

  • Аутоматски применљиве класе за ЦСС прелазе и анимације
  • Интеграцију библиотека CSS анимација осталих извора, као што је Animate.css
  • Коришћење JavaScripta-а за директно манипулисање DOM-ом за време кука за транзицију
  • Интегришите библиотеке JavaScripta анимација осталих извора, као што јеVelocity.js

Када се елемент умота у компоненту за транзицију и убаци или уклони, деси се следеће:

  1. Vue ће аутоматски детектовати да ли циљни елемент има примењене CSS транзиције или анимације. Уколико их има, CSS класе за транзицију ће бити додате/уклоњене у одговарајућим временима.
  2. Уколико компонента за транзицију пружа JavaScript hooks, биће позване у одговарајућим временима.
  3. Ако нису откривене CSS транзиције/анимације и ако нису пружене JavaScript hooks, операције DOM-a за уметање и/или уклањање ће бити извршене одмах у следећем фрејму. [42] [43]

Рутирање

Традиционални недостатак једностраничких апликација (SPA) је немогућност дељења линкова до тачне "под"странице унутар одређене веб странице. Пошто SPA сервира својим корисницима само један одговор заснован на URL-у са сервера (обично сервирају index.html или index.vue), обележавање одређених екрана или дељење линкова до специфичних делова је обично тешко, ако не и немогуће. Да би се решио овај проблем, многи клијентски рутери раздвајају своје динамичке URL-ове са "хашбенгом" (#!), на пример, page.com/#!/. Међутим, са HTML5, већина модерних прегледача подржава рутирање без хашбенга.

Vue пружа интерфејс за промену приказаног садржаја на страници на основу тренутне путање URL-а - без обзира на то како је промењен (било путем линка послатог имејлом, освежавања странице или линкова унутар странице). Додатно, коришћењем фронт-енд рутера омогућава се намерно мењање путање прегледача када се десе одређени догађаји у прегледачу (нпр. кликтање) на дугмадима или линковима. Vue сам по себи не долази са рутирањем преко хаша. Међутим, open-source "vue-router" пакет пружа API за ажурирање URL-а апликације, подржава дугме за повратак (навигацију кроз историју), као и линкове за ресетовање лозинке или потврду путем имејла са параметрима URL-а за аутентификацију. Подржава мапирање угњеждених рута на угњеждене компоненте и нуди детаљну контролу транзиције. Са Vue-ом, програмери већ састављају апликације помоћу малих грађевинских блокова који граде веће компоненте. Са vue-router-ом додатим у мешавину, компоненте само треба мапирати на руте којима припадају, а родитељске/рутне руте треба да показу где деца треба да се рендерују. [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>

Код изнад:

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

Екосистем

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

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

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

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

  • Vue Router – Званични рутер
  • Vuex – Централизовано управљање инспирисано Flux-ом
  • Vue Server Renderer – Рендеровање на страни сервера
  • Pinia – Ново поједностављено управљање стањем

Види још

Референце

  1. ^ „@vue/runtime-dom v3.2.45”. Bundlephobia (на језику: енглески). Приступљено 2023-01-29. 
  2. ^ а б в „Introduction”. Vuejs.org (на језику: енглески). Приступљено 3. 1. 2020. 
  3. ^ Macrae, Callum (2018). Vue.js: Up and Running: Building Accessible and Performant Web Apps (на језику: енглески). O'Reilly Media. ISBN 978-1-4919-9721-5. 
  4. ^ Nelson, Brett (2018). Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch (на језику: енглески). Apress. ISBN 978-1-4842-3781-6. 
  5. ^ Yerburgh, Edd (2019). Testing Vue.js Applications (на језику: енглески). Manning Publications. ISBN 978-1-61729-524-9. 
  6. ^ Freeman, Adam (2018). Pro Vue.js 2 (на језику: енглески). Apress. ISBN 978-1-4842-3805-9. 
  7. ^ Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A.; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019). Working with Vue.js (на језику: енглески). SitePoint. ISBN 978-1-4920-7144-0. [мртва веза]
  8. ^ [3][4][5][6][7][2]
  9. ^ „Meet the Team”. Vuejs.org (на језику: енглески). Приступљено 23. 9. 2019. 
  10. ^ „Evan is creating Vue.js”. Patreon (на језику: енглески). Приступљено 11. 3. 2017. 
  11. ^ „What is Vue.js”. W3Schools (на језику: енглески). Приступљено 21. 1. 2020. 
  12. ^ „Evan You”. Between the Wires (на језику: енглески). 3. 11. 2016. Архивирано из оригинала 3. 6. 2017. г. Приступљено 26. 8. 2017. 
  13. ^ а б „Vue.js: JavaScript MVVM made simple”. Hacker News. 2014-02-03. Приступљено 2023-01-29. 
  14. ^ а б „First Week of Launching Vue.js”. Evan You. 2014-02-11. Приступљено 2023-01-29. 
  15. ^ „Announcing Vue 3.4”. Vue.js. 28. 12. 2023. Приступљено 29. 3. 2024. 
  16. ^ „v3.3.0 Rurouni Kenshin”. Vue.js (на језику: енглески). 11. 5. 2023. Приступљено 2023-05-12 — преко GitHub. 
  17. ^ „v3.2.0 Quintessential Quintuplets”. Vue.js (на језику: енглески). 5. 8. 2021. Приступљено 10. 8. 2021 — преко GitHub. 
  18. ^ „v3.1.0 Pluto”. Vue.js (на језику: енглески). 7. 6. 2021. Приступљено 18. 7. 2021 — преко GitHub. 
  19. ^ „v3.0.0 One Piece”. Vue.js (на језику: енглески). 18. 9. 2020. Приступљено 23. 9. 2020 — преко GitHub. 
  20. ^ „v2.7.0 Naruto”. Vue.js (на језику: енглески). 1. 7. 2022. Приступљено 1. 7. 2022 — преко GitHub. 
  21. ^ „v2.6.0 Macross”. Vue.js (на језику: енглески). 4. 2. 2019. Приступљено 23. 9. 2020 — преко GitHub. 
  22. ^ „v2.5.0 Level E”. Vue.js (на језику: енглески). 13. 10. 2017. Приступљено 23. 9. 2020 — преко GitHub. 
  23. ^ „v2.4.0 Kill la Kill”. Vue.js (на језику: енглески). 13. 7. 2017. Приступљено 23. 9. 2020 — преко GitHub. 
  24. ^ „v2.3.0 JoJo's Bizarre Adventure”. Vue.js (на језику: енглески). 27. 4. 2017. Приступљено 23. 9. 2020 — преко GitHub. 
  25. ^ „v2.2.0 Initial D”. Vue.js (на језику: енглески). 26. 2. 2017. Приступљено 23. 9. 2020 — преко GitHub. 
  26. ^ „v2.1.0 Hunter X Hunter”. Vue.js (на језику: енглески). 22. 11. 2016. Приступљено 23. 9. 2020 — преко GitHub. 
  27. ^ „v2.0.0 Ghost in the Shell”. Vue.js (на језику: енглески). 30. 9. 2016. Приступљено 23. 9. 2020 — преко GitHub. 
  28. ^ „1.0.0 Evangelion”. Vue.js (на језику: енглески). 27. 10. 2015. Приступљено 23. 9. 2020 — преко GitHub. 
  29. ^ „0.12.0: Dragon Ball”. Vue.js (на језику: енглески). 12. 6. 2015. Приступљено 23. 9. 2020 — преко GitHub. 
  30. ^ „v0.11.0: Cowboy Bebop”. Vue.js (на језику: енглески). 7. 11. 2014. Приступљено 23. 9. 2020 — преко GitHub. 
  31. ^ „v0.10.0: Blade Runner”. Vue.js (на језику: енглески). 23. 3. 2014. Приступљено 23. 9. 2020 — преко GitHub. 
  32. ^ „v0.9.0: Animatrix”. Vue.js (на језику: енглески). 25. 2. 2014. Приступљено 23. 9. 2020 — преко GitHub. 
  33. ^ „v0.8.0”. Vue.js (на језику: енглески). 27. 1. 2014. Приступљено 23. 9. 2020 — преко GitHub. 
  34. ^ „v0.7.0”. Vue.js (на језику: енглески). 24. 12. 2013. Приступљено 23. 9. 2020 — преко GitHub. 
  35. ^ „0.6.0: VueJS”. Vue.js (на језику: енглески). 8. 12. 2013. Приступљено 23. 9. 2020 — преко GitHub. 
  36. ^ „Vue Roadmap”. Vue.js (на језику: енглески). 6. 11. 2022 — преко GitHub. 
  37. ^ „Components”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. 
  38. ^ „Šta su Vue.js komponente?”. Web Programiranje (на језику: српски). 2018-05-13. Приступљено 2024-04-09. 
  39. ^ „Template Syntax”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. 
  40. ^ „Vue 2.0 is Here!”. The Vue Point. 30. 9. 2016. Приступљено 11. 3. 2017. 
  41. ^ „Reactivity in Depth”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. 
  42. ^ „Transition Effects”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. 
  43. ^ „Transitioning State”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. 
  44. ^ „Routing”. Vuejs.org (на језику: енглески). Приступљено 11. 3. 2017. 

Спољашње везе

Strategi Solo vs Squad di Free Fire: Cara Menang Mudah!