Vue.js

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

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

Верзије

Када се објави нова главна верзија, на пример, 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 – Ново поједностављено управљање стањем

Види још

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

Референце

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

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