Vue.js sa zameriava najmä na vizualizačnú časť aplikácie, nazývanú aj front-end vývoj. Vue.js sa každým dňom stáva populárnym, pretože je veľmi jednoduché ho integrovať s inými projektmi a knižnicami. Je veľmi jednoduchý na inštaláciu a používanie.
Vue.js je progresívny rámec JavaScriptu open source používa sa na vývoj interaktívnych webových používateľských rozhraní a jednostránkových aplikácií (SPA). Vue.js sa bežne označuje ako Vue a vyslovuje sa ako „view.js“ alebo „view“.
Jednostránková aplikácia alebo SPA je webová aplikácia alebo webová stránka, ktorá používateľom poskytuje veľmi plynulý, citlivý a rýchly zážitok podobný desktopovej aplikácii. Jednostránková aplikácia obsahuje menu, tlačidlá a bloky na jednej stránke. Keď používateľ klikne na jednu z nich, dynamicky prepíše aktuálnu stránku namiesto načítania celých nových stránok zo servera. To je dôvod jeho rýchlosti odozvy.
Vue je v podstate postavený na vývoj frontendu, takže si musí poradiť s množstvom HTML, JavaScript a CSS súborov. Vue.js používateľom uľahčuje rozšírenie HTML o atribúty HTML nazývané direktívy. Vue.js poskytuje vstavané direktívy a mnoho direktív definite používateľom na zlepšenie funkčnosti HTML aplikácií.
Nižšie je uvedený zoznam najdôležitejších funkcií Vue.js:
Komponenty Vue.js sú jednou z dôležitých funkcií tohto rámca. Používajú sa na rozšírenie základných prvkov HTML na zapuzdrenie opätovne použiteľného kódu. V aplikáciách Vue.js môžete vytvoriť znovu použiteľné vlastné prvky, ktoré možno neskôr znova použiť v HTML.
Vue.js poskytuje šablóny založené na HTML, ktoré možno použiť na priradenie vykresleného DOM k údajom inštancie Vue. Všetky šablóny Vue sú platné HTML, ktoré môžu analyzovať prehliadače a analyzátory HTML, ktoré sú v súlade so špecifikáciami. Vue.js kompiluje modely do funkcií vykresľovania virtuálneho DOM. Vue pred obnovením prehliadača vykresľuje komponenty do virtuálnej pamäte DOM. Vue môže tiež vypočítať minimálny počet komponentov na opätovné vykreslenie a použiť minimálne množstvo manipulácie DOM pri zmene stavu aplikácie.
Vue poskytuje systém odozvy, ktorý používa jednoduché objekty JavaScript a optimalizuje opätovné vykresľovanie. V tomto procese každý komponent sleduje svoje reaktívne závislosti, takže systém presne vie, kedy a ktoré komponenty má znova vykresliť.
Navigácia na stránke sa vykonáva pomocou smerovača vue. Pre svoju jednostránkovú aplikáciu môžete použiť oficiálne podporovanú knižnicu vue-router.
Vue vám umožňuje používať rôzne prechodové efekty, keď sú prvky vložené, aktualizované alebo odstránené z DOM.
Existuje niekoľko spôsobov, ako použiť Vue.js. Môžete si ho nainštalovať tak, že prejdete na jeho oficiálnu stránku alebo môžete začať používať aj súbor Vue.js z knižnice CDN. Tu je niekoľko spôsobov, ako použiť Vue.js vo svojom projekte.
Ak chcete použiť značku <script> Vue.js priamo do vášho súboru HTML, musíte si ho stiahnuť z oficiálnej webovej stránky.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Poďme na oficiálnu stránku Vue.js https://vuejs.org/v2/guide/installation.html stiahnuť vue.js podľa vašich potrieb.
Vo svojej aplikácii môžete použiť aj súbor Vue.js z CDN. Použite odkaz https://unpkg.com/vue@3/dist/vue.global.js vo vnútri prvku <script>, ako je uvedené nižšie:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js je jednou z najnovších softvérových technológií, ktoré sa široko používajú na vývoj webových aplikácií a vytváranie jednostránkových aplikácií (SPA). Ako môžete uhádnuť z názvu, väčšinou sa používa pre používateľské rozhranie alebo zobrazovaciu stranu projektu.
Pozrime sa na výhody používania Vue.js vo vašom projekte:
Jednou z najväčších výhod Vue.js je, že má veľmi malú veľkosť. Úspech rámca JavaScript do značnej miery závisí od jeho veľkosti a tento vzrušujúci doplnok JavaScript má veľkosť iba 18-21 kB, takže si ho môžete veľmi ľahko stiahnuť a použiť okamžite.
Rámec Vue.js má veľmi jednoduchú štruktúru a je veľmi ľahko pochopiteľný. Je to jeden z dôvodov popularity tohto rámca. Ak poznáte HTML a JavaScript, môžete jednoducho kódovať vo Vue.js. Používatelia môžu jednoducho pridať Vue.js do svojho webového projektu vďaka jeho jednoduchej štruktúre a vyvíjať aplikácie.
Vue.js má veľa komponentov pre všetko a dá sa veľmi rýchlo integrovať s existujúcimi aplikáciami. Môžete ho integrovať s akoukoľvek aplikáciou napísanou v JavaScripte.
Flexibilná povaha Vue.js tiež uľahčuje pochopenie pre vývojárov React.js, Angular.js a akýchkoľvek ďalších nových rámcov JavaScript. Poskytuje veľkú flexibilitu pri používaní virtuálnych uzlov na písanie súborov HTML, súborov JavaScript a súborov čistého JavaScriptu.
Môžete vytvoriť vlastné prvky, ktoré sú opakovane použiteľné v aplikáciách Vue.js.
Vue.js poskytuje veľmi jednoduchú, kompletnú a podrobnú dokumentáciu, takže vývojári, ktorí majú malú predstavu o HTML a JavaScripte, ju môžu použiť na programovanie.
Vue.js používa virtuálny DOM podobný iným existujúcim rámcom ako ReactJS, Ember atď. Virtuálny DOM je odľahčená stromová reprezentácia pôvodného HTML DOM v pamäti a aktualizuje sa bez ovplyvnenia počiatočného DOM.
Vue.js poskytuje obojsmernú komunikáciu so svojou architektúrou Model View View Model (MVVM), ktorá zjednodušuje prácu s blokmi HTML.
Rámec prichádza so systémom, ktorý nám umožňuje deklaratívne vykresľovať údaje do DOM pomocou jednoduchej a priamočiarej syntaxe modelu.
Tu je príklad:
<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>Rámec Vue.js nám to umožňuje definire HTML atribúty nazývané direktívy, ktoré sa používajú na poskytovanie funkčnosti HTML aplikáciám.
Vo Vue.js existujú dva typy direktív:
Vue.js používa dvojité zátvorky {{}} ako zástupné symboly pre údaje a direktívy Vue.js sú atribúty HTML, ktoré používajú predponu v.
Aplikácia Vue sa pripája k jedinému prvku DOM a plne ho ovláda. Vo vyššie uvedenom príklade je to #app.
S Vue môžeme považovať HTML za vstupný bod a všetko ostatné sa deje vo vytvorenej inštancii Vue.
Pozrime sa na príklad, kde vyskúšame väzbu prvkov a atribútov:
<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> V tomto prípade je novým atribútom v-bind smernica. Direktívy sa používajú s predponou v- na označenie, že ide o jedinečné atribúty poskytované Vue a používajú sa na aplikovanie špeciálneho responzívneho správania na vykreslený DOM.
Výsledok príkladu je nasledujúci
Ercole Palmeri
Coveware od Veeam bude aj naďalej poskytovať služby reakcie na incidenty v oblasti kybernetického vydierania. Coveware ponúkne forenzné a sanačné schopnosti…
Prediktívna údržba prináša revolúciu v ropnom a plynárenskom sektore s inovatívnym a proaktívnym prístupom k riadeniu závodu.…
Britská CMA vydala varovanie pred správaním Big Tech na trhu s umelou inteligenciou. tam…
Vyhláška „Case Green“, ktorú sformulovala Európska únia na zvýšenie energetickej účinnosti budov, ukončila svoj legislatívny proces s…
