VUE.JS

Yaroslav Satanovskyi, Ivan Kovmir

Čo to je? Na základe informácií z Wikipedie (1) - Vue.js je open source Java

Scriptový rámec pre vytváranie užívateľských rozhraní. Môj názor je taký, že Vue.js je moderný progresívny framework napísaný v JavaScripte na vytváranie webových aplikácií na strane klienta. Hlavné uplatnenie tohto frameworku je vytvorenie a usporiadanie používateľského rozhrania.

Prvé vydanie rámca bolo vo februári 2014. Jeho tvorcom je Evan You1, ktorý predtým pracoval v spoločnosti Google na serveri AngularJS. Odvtedy sa rámec dynamicky vyvíja, jeho aktuálna verzia je 2.6.12.

Inými slovami, Vue.js je nástroj, ktorý je možné implementovať postupne. Vložiteľnosť je spôsobená skutočnosťou, že sa Vue.js usiluje o progresivitu: K existujúcemu projektu je možné pridať podporu Vue, vďaka čomu sa jeho funkčnosť výrazne rozšíri. A to je to, čo ho odlišuje od iných frameworkov.

Ľahká integrácia je vo všeobecnosti jednou z hlavných výhod tohto rámca, najmä v kombinácii so schopnosťou integrácie s back-endovými rámcami.

Medzi ďalšie silné stránky Vue.js patrí ľahká výučba, dobrá dokumentácia a vysoký výkon. Vue.js možno tiež použiť na vytvorenie jednostránkových aplikácií.

Centrálnym konceptom vo Vue.js je koncept komponentov, to znamená malých častí používateľského rozhrania, ktoré je možné opakovane použiť. Samotná aplikácia sa teda skladá z častí-komponentov. Jeden komponent môže obsahovať niekoľko ďalších komponentov, to znamená, že sa používa stromová hierarchia.

1 Nezávislý vývojár otvorených zdrojov. Vedúci projektu z VUEjs.1

Obrázok 1 Oficiálne logo Vue.JS

Vue.js má veľmi dobrý

ekosystém, ktorý obsahuje mnoho užitočných komponentov a nástrojov tretích strán. Na GitHube je samostatný dlhý zoznam užitočných vecí s názvom Awesome Vue.js. (2)

Porovnanie s inými frameworkámiStručne povedané, Vue je podobný Reactu, napríklad v tom, že oba rámce

používajú Virtual DOM2 a zameriavajú sa na koreňovú knižnicu; sú to vysoko výkonné rámce a obe poskytujú dobré škálovacie riešenia. Ale samozrejme existujú aj rozdiely: React má väčší, ale aj fragmentovanejší ekosystém, zatiaľ čo Vue udržiava všetky ďalšie knižnice v súlade s jadrom knižnice.

AngularJS tiež významne ovplyvnil Vue, avšak na rozdiel od neho je Vue oveľa ľahšie naučiteľný a tiež flexibilnejší a modulárnejší ako Angular, ktorý dodržiava rigidnú aplikačnú štruktúru. Ak porovnáme výkon týchto dvoch rámcov, potom je Vue produktívnejší a ľahšie optimalizovateľný (aj keď keď porovnáme Vue.js s Angular , potom oba rámce vykazujú približne rovnaký výkon, Vue iba mierne prekonáva Angular).

Podľa Evana You React používajú hlavne tí, ktorí majú radi štýl funkčného programovania, Angular - tí, ktorí už predtým programovali v Jave alebo C#. A Vue je obľúbený u tých, ktorí uprednostňujú klasickejší vývojový model.

Päť dôvodov, prečo sa učia Vue.js1) Nie je potrebný žiadny krok “montáže“. Kritický aspekt filozofie Vue –

začínať ľahko a jednoducho. Stačí vložiť značku skriptu smerujúcu na najnovšie vývojové vydanie a budete mať prístup k bežeckému modulu Vue.<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

2) Aktualizované a vylepšené rozhranie príkazového riadku(Vue CLI 3). Je navrhnutý tak, aby propagoval najlepšie postupy a plne funkčnú predvolenú konfiguráciu Webpack, čo uľahčuje jeho rozšírenie bez nutnosti aktualizácie.

npm install -g @vue/clivue create my-project

2 Spôsob reprezentácie štruktúrovaného dokumentu pomocou objektov.2

Obrázok 2 Stromová hierarchia

3) Inštancia Vue. Najsilnejšou stránkou Vue je jeho systém reaktivity. Môžeme sa k nemu pripojiť prostredníctvom inštancie Vue. Systém reaktivity Vue je dobrý vo svojej jednoduchosti. Experimentovanie s inštanciou Vue je vynikajúci spôsob, ako pochopiť, ako funguje systém reaktivity, a zvýšiť všeobecnú znalosť Vue a JavaScriptu.

new Vue({el: "#app",

})

4) Vue.js poskytuje oficiálnu podporu pre niekoľko dôležitých doplnkov, vrátane vue-router pre smerovanie na strane klienta, vuex pre klientsku správu, vue-test-utils pre komponenty testovania jednotiek, vue-devtools pre rozšírenia prehľadávača pre ladenie, Vue CLI, ako už bolo opísané.

5) Ľahkosť učenia. Na úvod do Vue sa nemusíte učiť celé API, nemusíte sa učiť novú syntax ako JSX; na začiatok sú potrebné iba základné znalosti HTML, CSS a JS.

3

Praktická časťRovnako ako v prípade mnohých aplikácií v jazyku JavaScript, vychádzame

z potreby zobraziť údaje na našej webovej stránke. S Vue to začína naozaj jednoducho. Zahrnieme knižnicu Vue, vytvoríme inštanciu Vue a zapojíme sa do nášho koreňového prvku s ID aplikácie.

EL je skratka pre element.

4

Svoje údaje tiež presunieme dovnútra objektu a dvojitými zloženými zátvorkami zmeníme X na výraz.

Ako môžete sledovať, funguje to.

5

Celkom dobre, ale kúzlo Vue sa začína pri zmene údajov. Ak skočíme do konzoly a zmeníme hodnotu nášho produktu. Hneď ako sa zmenila hodnota

produktu, Vue automaticky aktualizoval náš HTML.

Je to tak preto, lebo Vue je reaktívny, čo znamená, že pri zmene našich údajov sa Vue postará o aktualizáciu všetkých miest, ktoré na našej webovej stránke používame. Funguje to s akýmkoľvek typom údajov, nielen s reťazcami. Namiesto jedného produktu teda poďme použiť celý rad produktov.

6

Potom aktualizujeme našu H2 na neusporiadaný zoznam a pomocou smernice Vue v-for vytvoríme novú položku zoznamu pre každý produkt v poli. Týmto spôsobom získa každý produkt svoju vlastnú položku zoznamu, ako vidíte tu.

7

Bibliografia

1. From Wikipedia, the free encyclopedia. Wikipedia. VUE.js. [Online] 2020. https://en.wikipedia.org/wiki/Vue.js.2. SCRUM. GitHub. awesome-vue. [Online] 2020. https://github.com/vuejs/awesome-vue.3. Metanit. Metanit.com. Čo je Vue.js. Prvá aplikácia. [Online] 2017. https://metanit.com/web/vuejs/1.1.php.4. W3SCHOOLS. w3schools.com. What is Vue.js? [Online] 2019. https://www.w3schools.com/whatis/whatis_vue.asp.5. WebForMyself. webformyself.com. Sedem dôvodov, prečo sa učia Vue.js v roku 2019. [Online] 2019. https://webformyself.com/sem-prichin-dlya-izucheniya-vue-js-v-2019-godu/.

8