BF Summer sales
Pouze tento týden sleva až 80 % na HTML & CSS a JavaScript
80 % bodů zdarma na online výuku díky naší Letní akci!

Lekce 1 - Úvod do Vue.js

Vítejte u první lekce on-line kurzu Vue.js. V dnešním tutoriálu si řekneme, co Vue.js je, k čemu je, co všechno k němu potřebujeme a ukážeme si také proměnné a for-loop smyčku.

Úvod do Vue.js

Vue.js je frontend framework pro tvorbu reaktivních webových aplikací. Má vlastní systém komponentů, routingu a dalších pár vychytávek. Může se psát v JavaScriptu, ale má také nativní podporu pro TypeScript. Byl vytvořen vývojářem Evan You.

Vlastnosti

Proč by jsme zrovna měli psát web ve Vue namísto oblíbeného Reactu a nebo enterprise Angularu? Spoustu začátečníků se k Vue obrací kvůli jednoduchosti. Místo toho, aby jsme jako v Reactu psali celý frontend v JSX, můžeme psát normální HTML a tomu dát potom život pomocí Vue. Kromě toho má Vue.js optimalizovaný výkon a jeho minifikovaná verze má pouze kolem 20KB.

Reaktivnost

Dejme si jednoduchou situaci. Zákazník po nás chce, abychom udělali stránku, která zobrazí teplotu bazénu u něj doma z jeho databáze a měla by být aktualizovaná každou hodinu. Brnkačka, každou hodinu mu budeme přepisovat stránku a vyděláme si snadno peníze. Co kdyby teď zákazník chtěl stejnou stránku, akorát pro celé město a interval aktualizace by měla být 1 minuta, namísto 1 hodiny?

To je přesně ten okamžik, kdy se hodí využít dynamický reaktivní web. Připojíme se k databázi a automaticky aktualizujeme web, kdykoliv si uživatel zamane, tohle zní dobře, ne? :)

Funkce

Vue.js je jeden ze tří hlavních JavaScript frameworků, který nám dovoluje psát dynamický web a dosazovat si proměnné do HTML, například z databáze či API, routovat URL adresy a mnohem více. Můžeme ho používat v normálním HTML dokumentu pomocí tagu pro script nebo si vytvořit kompletně nový Vue projekt, který má úplně všechno, co Vue obsahuje (ne jen jeho dynamické vlastnosti).

Požadavky

Abychom nějak začali, měli bychom mít samozřejmě již nějaké znalosti.

Znalosti

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Určitě bude potřeba umět základní HTML a CSS. Bez znalosti JavaScriptu se také neobejdeme. TypeScript potřebovat nebudeme, ale pokud ho umíme, tak ho můžeme použít. Kompilaci TypeScriptu do JavaScriptu si ale v tomto kurzu ukazovat nebudeme. Pokud HTML, CSS a JavaScript neumíme, je třeba navštívit příslušné kurzy a naučit se je. V opačném případě budeme mít problémy a moc toho nepobereme.

Software

Osobně využívám IDE Visual Studio Code, který mile rád doporučím komukoliv kdo programuje. Poté budeme potřebovat nainstalovat NodeJS na spouštění našeho kódu skrz npm (ten je už v instalaci Node, tak ho nemusíme stahovat zvlášť). Přes npm potom nainstalujeme Vue CLI a další balíčky, ale to si necháme na jindy.

Použití v již existujících projektech

Ještě, než se vrhneme na tvoření celé Vue aplikace, můžeme nejdřív implementovat Vue do obyčejného HTML dokumentu, bez jakýkoliv příkazů a instalování. Jde to jednoduchým <script> tagem uvnitř tagu <head>:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Již existující projekt</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Tahle věcička bude dělat -->
</head>

Tím naimportujeme zdrojový kód ze "skladu", který spravuje npm a vlastní Vue.js. Jedná se o takzvané CDN (Cloud Delivery Network), jejich JavaScriptový zdrojový kód tak nemusíme mít ve svém počítači. Všechno bude fungovat, dokud budeme mít přístup k internetu.

Nyní si vytvoříme část HTML, kterou budeme pomocí Vue.js upravovat. Musíme HTML dokumentu dát nějaký element s ID, aby ho pak Vue.js jednoduše našlo a mohlo následně upravovat:

<body>
    <div id="app">

    </div>
</body>

Vše co teď dáme do tagu <div> s ID app bude viditelné a upravitelné pro Vue, jednoduché a prosté. Co ale dál? Prvně by se hodilo vytvořit Vue aplikaci, což uděláme v tagu <script>, jinak by se žádná magie nestala a měli bychom furt normální HTML dokument. To, co jsme udělali v tagu <script> v <head>, bylo totiž pouze importování source kódu Vue.js:

<script>
    var app = new Vue({
        el: '#app',
    })
</script>

Tímhle jsme vytvořili novou aplikaci Vue s názvem app. Důležité je, že jsme specifikovali vlastnost el (jako element) a její hodnotu nastavili na '#app'. Hashtag (#) proto, aby aplikace věděla, že má hledat ID, a poté specifické ID, v našem případě to bude app. Jako název si můžeme zvolit víceméně cokoliv (musí to však splňovat pravidla pro ID).

Proměnné

Super, máme Vue aplikaci prakticky nainstalovanou, co teď? Můžeme například dát do tagu <div> nápis, který bude pocházet z našeho JavaScript kódu:

<body>
    <div id="app">
        <h1> {{ napis }} </h1>
    </div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            napis: 'Ahoj itnetwork.cz!'
        }
    })
</script>

Vše mezi složenými závorkami ({{ }}) slouží jako reference proměnné v HTML, proměnná se pak najde v JS kódu data a dosadí se do HTML. Naše stránka by teď měla vypadat takto:

Již existující projekt
index.html

Není to teda úplně něco, co bychom si vystavovali na zeď, ale jde nám o jednoduchý příklad, kde funguje vše tak, jak má.

Vue For Loop

Teď se můžeme dostat k příkladu o bazénech, který jsme říkali na začátku. Na to můžeme využít tzv. Vue for loop, který vytvoří HTML objekt pro každou věc v nějakém seznamu. Je to něco podobného jako má PHP cyklus foreach:

<body>
    <div id="app">
        <div v-for="bazen in bazeny" :key="bazen.id">
            <h1>Bazén {{ bazen.id }} Teplota {{ bazen.teplota }}</h1>
        </div>
    </div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            bazeny: [
                { id: 1, teplota: 22 },
                { id: 2, teplota: 24.5 },
                { id: 3, teplota: 28 },
                { id: 4, teplota: 17.2 }
            ]
        }
    })
</script>

Nyní si vysvětlíme, co jsme to vlastně napsali. První slovíčko, které v klasickém HTML nezahlídneme, je atribut v-for v tagu <div>, které Vue používá pro klasické for loopy, které známe například ještě z JavaScriptu. Atribut v-for se dává na element, který chceme, aby byl výsledek for loopu. V našem případě tedy chceme, aby pro každý bazén v listu pro bazény byl vytvořen nový <div>, a v něm byl nadpis <h1>, který nám vypíše ID bazénu a jeho teplotu.

Syntax bazen in bazeny je velmi podobný příkladu item in items, který Vue.js dává jako příklad na své stránce o listech. Takže pro každý bazén vytvoříme nový <div>, pak na něj můžeme referovat jako na bazen a můžeme se dostat k jeho vlastnostem id nebo teplota.

Stránka by teď měla vypadat takto:

Vue For Loop
index.html

Náš kód funguje! Pro každý bazén v seznamu pro bazény ve vlastnosti data se vytvořil <div> a v něm nápis obsahující jak id, tak teplotu bazénu. Zatím nevyužíváme všechnu magii Vue, ta přijde až později, kdy budeme pomocí API získávat data ze serveru a dynamicky je aktualizovat na webu.

To by bylo vše pro dnešní úvod do Vue.js :)

V další lekci, První aplikace ve Vue.js pomocí Vue CLI, si vytvoříme aplikaci pomocí Vue CLI a napíšeme si i naši první komponentu.


 

Všechny články v sekci
Vue.js
Článek pro vás napsal Jakub Konečný
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (2)

 

 

Komentáře

Avatar
xbox2249
Redaktor
Avatar
xbox2249:25. července 18:59

Jsem rád že se někdo pustil do seriálu o VueJS. Těším se na další díly.

 
Odpovědět
25. července 18:59
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.