Vue.js

Vue.js

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

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

Преглед

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

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

Историја

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

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

Верзије

Верзија	Датум изласка	Наслов	Крај дугорочне подршке (LTS).	Крај животног века
3.4	000000002023-12-28-000028. децембар 2023.	Slam Dunk
3.3	000000002023-05-11-000011. мај 2023.	Rurouni Kenshin
3.2	000000002021-08-05-00005. август 2021.	Quintessential Quintuplets
3.1	000000002021-06-07-00007. јун 2021.	Pluto
3.0	000000002020-09-18-000018. септембар 2020.	One Piece
2.7	000000002022-07-01-00001. јул 2022.	Naruto	000000002023-12-31-000031. децембар 2023.	000000002023-12-31-000031. децембар 2023.
2.6	000000002019-02-04-00004. фебруар 2019.	Macross	000000002022-03-18-000018. март 2022.	000000002023-09-18-000018. септембар 2023.
2.5	000000002017-10-13-000013. октобар 2017.	Level E
2.4	000000002017-07-13-000013. јул 2017.	Kill la Kill
2.3	000000002017-04-27-000027. април 2017.	JoJo's Bizarre Adventure
2.2	000000002017-02-26-000026. фебруар 2017.	Initial D
2.1	000000002016-11-22-000022. новембар 2016.	Hunter X Hunter
2.0	000000002016-09-30-000030. септембар 2016.	Ghost in the Shell
1.0	000000002015-10-27-000027. октобар 2015.	Evangelion
0.12	000000002015-06-12-000012. јун 2015.	Dragon Ball
0.11	000000002014-11-07-00007. новембар 2014.	Cowboy Bebop
0.10	000000002014-03-23-000023. март 2014.	Blade Runner
0.9	000000002014-02-25-000025. фебруар 2014.	Animatrix
0.8	000000002014-01-27-000027. јануар 2014.	Н/Д	прва верзија јавно објављена
0.7	000000002013-12-24-000024. децембар 2013.	Н/Д
0.6	000000002013-12-08-00008. децембар 2013.	VueJS

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

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

Компоненте

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

<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. Функције за рендеровање омогућавају изградњу апликација из софтверских компоненти.

Реактивност

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

Транзиције

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

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

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

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

Рутирање

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

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

<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 – Ново поједностављено управљање стањем

Види још

• Поређење веб оквира заснованих на JavaScript-у
• React
• AngularJS
• Angular
• Quasar Framework
• Веб-фрејмворк
• JavaScript библиотека
• Model–view–ViewModel
• Nuxt.js

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

• Званични веб-сајт
• Шта је Vue.js