Чланци

Шта је апликација за једну страницу, а шта Вуе.јс

Вуе.јс је прогресивни ЈаваСцрипт оквир отвореног кода који се користи за развој интерактивних веб корисничких интерфејса и апликација за једну страницу.

Вуе.јс се углавном фокусира на визуелни део апликације, који се такође назива фронт-енд развој. Вуе.јс постаје популаран из дана у дан јер се веома лако интегрише са другим пројектима и библиотекама. Веома је једноставан за инсталацију и употребу.

Шта је Вуе.јс?

Вуе.јс је прогресивни ЈаваСцрипт оквир Опен Соурце користи се за развој интерактивних веб корисничких интерфејса и апликација на једној страници (СПА). Вуе.јс се обично назива Вуе и изговара као "виев.јс" или "виев".

Шта је апликација на једној страници (СПА)?

Апликација за једну страницу или СПА је веб апликација или веб локација која корисницима пружа веома глатко, брзо и брзо искуство слично десктоп апликацији. Апликација на једној страници садржи мени, дугмад и блокове на једној страници. Када корисник кликне на једну од њих, он динамички преписује тренутну страницу уместо да учитава читаве нове странице са сервера. Ово је разлог за његову брзину реаговања.

Вуе је у основи направљен за развој фронтенда, тако да мора да обрађује много ХТМЛ, ЈаваСцрипт и ЦСС датотека. Вуе.јс корисницима олакшава проширење ХТМЛ-а помоћу ХТМЛ атрибута који се називају директивама. Вуе.јс обезбеђује уграђене директиве и многе директиве defiкорисник да побољша функционалност ХТМЛ апликација.

Карактеристике Вуе.јс

Испод је листа најважнијих карактеристика Вуе.јс:

Цомпоненти

Компоненте Вуе.јс су једна од важних карактеристика овог оквира. Користе се за проширење основних ХТМЛ елемената за енкапсулацију кода за вишекратну употребу. Можете да креирате прилагођене елементе за вишекратну употребу у Вуе.јс апликацијама који се касније могу поново користити у ХТМЛ-у.

шаблони

Вуе.јс пружа шаблоне засноване на ХТМЛ-у који се могу користити за повезивање приказаног ДОМ-а са подацима Вуе инстанце. Сви Вуе предлошци су важећи ХТМЛ који могу да се рашчлане помоћу прегледача усклађених са спецификацијама и ХТМЛ парсера. Вуе.јс компајлира моделе у функције виртуелног ДОМ рендеровања. Вуе приказује компоненте у виртуелној ДОМ меморији пре освежавања претраживача. Вуе такође може израчунати минимални број компоненти за поновно приказивање и применити минималну количину ДОМ манипулације приликом промене стања апликације.

Реаттивита

Вуе обезбеђује систем одзива који користи једноставне ЈаваСцрипт објекте и оптимизује поновно приказивање. У овом процесу, свака компонента прати своје реактивне зависности, тако да систем тачно зна када и које компоненте да поново прикаже.

Роутинг

Навигација по страници се врши уз помоћ вуе-роутера. Можете користити званично подржану библиотеку вуе-роутер за своју апликацију на једној страници.

Трансизиони

Вуе вам омогућава да користите различите ефекте прелаза када се елементи уметну, ажурирају или уклањају из ДОМ-а.

Како инсталирати Вуе.јс?

Постоји неколико метода за коришћење Вуе.јс. Можете га инсталирати тако што ћете отићи на његову званичну локацију или можете почети да користите датотеку Вуе.јс из ЦДН библиотеке. Ево неколико начина да користите Вуе.јс у свом пројекту.

Директно у ХТМЛ датотеци

Ако желите да користите ознаку <script> Вуе.јс директно у вашу ХТМЛ датотеку, потребно је да је преузмете са званичне веб странице.

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>  

Идемо на званичну веб страницу Вуе.јс https://vuejs.org/v2/guide/installation.html да преузмете вуе.јс према вашим потребама.

Коришћење ЦДН-а

Такође можете користити датотеку Вуе.јс из ЦДН-а, у својој апликацији. Користите везу хттпс://унпкг.цом/вуе@3/дист/вуе.глобал.јс унутар елемента <script>, као испод:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Предности коришћења Вуе.јс

Вуе.јс је једна од најновијих софтверских технологија која се широко користи за развој веба и прављење апликација на једној страници (СПА). Као што можете претпоставити из имена, углавном се користи за кориснички интерфејс или екранску страну пројекта.

Хајде да видимо предности коришћења Вуе.јс у вашем пројекту:

Веома мала величина

Једна од највећих предности Вуе.јс-а је та што је веома мале величине. Успех ЈаваСцрипт оквира много зависи од његове величине, а овај узбудљиви ЈаваСцрипт додатак има само 18-21 КБ, тако да га можете врло лако преузети и користити за кратко време.

Иновациони билтен
Не пропустите најважније вести о иновацијама. Пријавите се да их примате путем е-поште.
Лако за разумевање и кодирање

Вуе.јс оквир има веома једноставну структуру и веома је лак за разумевање. То је један од разлога популарности овог оквира. Ако сте упознати са ХТМЛ-ом и ЈаваСцрипт-ом, лако можете да кодирате у Вуе.јс. Корисници могу лако додати Вуе.јс свом веб пројекту због његове једноставне структуре и развијања апликација.

Једноставна интеграција са постојећим апликацијама

Вуе.јс има много компоненти за све и може се веома брзо интегрисати са постојећим апликацијама. Можете га интегрисати са било којом апликацијом написаном у ЈаваСцрипт-у.

Флексибилан по природи

Флексибилна природа Вуе.јс-а такође олакшава разумевање програмерима Реацт.јс, Ангулар.јс и свих других нових ЈаваСцрипт оквира. Пружа велику флексибилност за коришћење виртуелних чворова за писање ХТМЛ датотека, ЈаваСцрипт датотека и чистих ЈаваСцрипт датотека.

Цомпоненти

Можете да креирате прилагођене елементе који се могу поново користити у Вуе.јс апликацијама.

Једноставна, комплетна и детаљна документација

Вуе.јс пружа веома једноставну, потпуну и детаљну документацију, тако да програмери који имају мало појма о ХТМЛ-у и ЈаваСцрипт-у могу да га користе за програмирање.

виртуелни ДОМ

Вуе.јс користи виртуелни ДОМ сличан другим постојећим оквирима као што су РеацтЈС, Ембер, итд. Виртуелни ДОМ је лагана репрезентација стабла у меморији оригиналног ХТМЛ ДОМ-а и ажурира се без утицаја на почетни ДОМ.

Двосмерна комуникација

Вуе.јс обезбеђује двосмерну комуникацију са својом архитектуром Модел Виев Виев Модел (МВВМ) која поједностављује руковање ХТМЛ блоковима.

Вуе.јс декларативно приказивање

Оквир долази са системом који нам омогућава да декларативно прикажемо податке у ДОМ користећи једноставну и јасну синтаксу модела.

Ево примера:

<body>
<div id="app">  
  {{ message }}  
</div>

<script>
var app = new Vue({  
  el: '#app',  
  data: {  
    message: 'This is a simple Vue.js Declarative Rendering example!'  
  }  
})  
</script>
</body>

Вуе.јс оквир нам омогућава да defiнире ХТМЛ атрибути који се називају директиве, који се користе да обезбеде функционалност ХТМЛ апликацијама.

Постоје две врсте директива у Вуе.јс:

  • интегрисане директиве е
  • директиве defiунети од стране корисника.

Вуе.јс користи дупле заграде {{}} као чуваре места за податке, а Вуе.јс директиве су ХТМЛ атрибути који користе префикс в-.

Вуе апликација се повезује са једним ДОМ елементом и потпуно га контролише. У горњем примеру, то је #апп.

Са Вуе-ом можемо сматрати ХТМЛ као улазну тачку, а све остало се дешава унутар креиране Вуе инстанце.
Хајде да видимо пример где покушавамо да повежемо елементе и атрибуте:

<html>  
    <head>  
        <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>         
        <div id="app-2">  
        <span v-bind:title="message">  
            Hover mouse over me for a few seconds  
            and see a dynamically bound title which I have set!  
        </span>  
        </div>          
        <script>
           var app2 = new Vue({  
           el: '#app-2',  
           data: {  
           message: 'You loaded this page on ' + new Date().toLocaleString()  
                 }  
           })  
       </script>  
    </body>  
</html>  

У овом случају, нови атрибут в-бинд је директива. Директиве се користе са префиксом в- да би се назначило да су јединствени атрибути које обезбеђује Вуе и користе се за примену посебног одзивног понашања на рендеровани ДОМ.

Резултат примера је следећи

Ercole Palmeri

Иновациони билтен
Не пропустите најважније вести о иновацијама. Пријавите се да их примате путем е-поште.

Недавни чланци

Вееам има најсвеобухватнију подршку за рансомваре, од заштите до одговора и опоравка

Цовеваре од Вееам-а ће наставити да пружа услуге одговора на инциденте са сајбер изнудом. Цовеваре ће понудити форензику и могућности санације…

КСНУМКС април КСНУМКС

Зелена и дигитална револуција: Како предиктивно одржавање трансформише индустрију нафте и гаса

Предиктивно одржавање револуционише сектор нафте и гаса, са иновативним и проактивним приступом управљању постројењима.…

КСНУМКС април КСНУМКС

Британски антимонополски регулатор подигао је БигТецх аларм због ГенАИ

УК ЦМА је издао упозорење о понашању Биг Тецх-а на тржишту вештачке интелигенције. Тамо…

КСНУМКС април КСНУМКС

Цаса Греен: енергетска револуција за одрживу будућност у Италији

Уредба „Цасе Греен“, коју је формулисала Европска унија за побољшање енергетске ефикасности зграда, завршила је свој законодавни процес са…

КСНУМКС април КСНУМКС

Прочитајте Иновације на свом језику

Иновациони билтен
Не пропустите најважније вести о иновацијама. Пријавите се да их примате путем е-поште.

Пратите нас