2. diel - Komponenty vo VueJS

V minulej lekcii, Úvod do Vue.js a prvej aplikácie , sme si niečo povedali o Vue a vytvorili kostru nášho nového projektu.

V tejto lekcii si predstavíme Vue komponent ako základný stavebný prvok aplikácie. Zoznámime sa so štruktúrou Vue komponenty as tým, ako sa komponenty využívajú naprieč aplikácií.

Komponenta vo VueJS

Každá VueJS aplikácie sa skladá z jednotlivých komponentov. Komponenta je vlastne základný stavebný prvok v aplikácii obsahujúci šablónu HTML, CSS štýlovanie a skript, v ktorom riadime prácu s dátami a logiku správania komponenty.

Komponenty je možné definovať aj vo vnútri iných komponentov, my sa však podržíme konceptu Single File Components - každý komponent v našej aplikácii bude reprezentovaná jedným súborom s koncovkou .vue.

Všetky komponenty, ktoré budeme v aplikácii postupne vytvárať, budeme zhromažďovať v adresári src/components/. Jedinou výnimkou bude koreňová komponenta App.vue, ktorú sme si predstavili v minulej lekcii a ktorá bola vygenerovaná automaticky pri vytvorení projektu - tá zostáva uložená priamo v adresári src/.

Príprava

Pre začiatok si upravme základné koreňovú komponent App.vue tak, aby sme sa mohli zbaviť súborov, ktoré v našej aplikácii nebudeme upravovať. Súbor App.vue zeditujete do tejto podoby:

<template>
  <div />
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

V súbore sme vymazali import preddefinované komponenty HelloWorld a jej registráciu v skripte, obsah šablóny sme nahradili prázdnym elementom <div>.

V adresári src/components/ teraz môžeme vymazať nepotrebný súbor HelloWorld.vue a v adresári src/assets/ zmazať nepotrebný obrázok logo.png.

V tejto chvíli máme aplikáciu úplne prázdnu a sme pripravení na vytváranie vlastných komponentov. Keď si teraz zobrazíme projekt vo webovom prehliadači, uvidíme prázdnu stránku.

V komponente App.vue sme tiež nastaviť niektoré globálne CSS štýly. Písanie štýlov v komponentoch si detailnejšie vysvetlíme neskôr.

Tvorba nové komponenty

Prvá komponenta, ktorú si nakódíme, sa bude volať TheLayout. Bude akýmsi obalom našej kalkulačky. Je dobrým zvykom pomenovávať komponenty dvouslovnými názvy, v šablónach s nimi totiž budeme pracovať ako s HTML elementy a dvouslovný názov nám bezpečne vylučuje možnosť kolízie názvu s už existujúcim HTML tagom. Dvoch i viacslovné názvy komponentov zapisujeme v notáciu CamelCase. Ďalšie dobré pravidlo, ktorého sa podržíme, je zvláštne označovanie komponentov, ktoré budú v celej aplikácii použité iba raz. Na označenie takýchto komponentov užívame práve anglický určitý člen The ako prvé slovo názvu - preto sa nový komponent teda bude volať TheLayout.

V adresári src/components/ teda vytvorme nový súbor s názvom TheLayout.vue. Pre začiatok doň vložme tento kód:

<template>
  <div class="container">
    <div class="calculator">
      <div class="calculator-row">
        <div class="display">value</div>
      </div>
      <div class="calculator-row"/>
      <div class="calculator-row"/>
      <div class="calculator-row"/>
      <div class="calculator-row"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TheLayout'
}
</script>

<style>
.container {
  background: #efefef;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calculator {
  background: #F6F3DF;
  border: 1px solid #bcbcbc;
  border-radius: 4px;
  overflow: hidden;
}
.calculator-row {
  display: flex;
  justify-content: space-between;
  height: 60px;
  width: 240px;
}
.calculator-row:first-child {
  border-bottom: 1px solid #cdcdcd
}
.display {
  flex: 1;
  font-size: 1.5rem;
  padding: .5em;
  display: flex;
  align-items: center;
  background: #DEF7EB;
  justify-content: flex-end;
}
</style>

Štruktúra komponenty

Vue komponenta sa skladá z troch častí - šablóny, skriptu a štýlov, pričom prvé dve tieto súčasti sú povinné. Komponent nemusí obsahovať štýly, ak ich nepotrebujeme.

Šablóna

V šablóne píšeme HTML kód, teda elementy, ktoré bude komponenta v aplikácii zobrazovať. Podobne ako v iných šablónovacích systémoch môžeme do HTML kódu vkladať dátový obsah, pomocou direktív môžeme renderovať niektoré časti HTML kódu podmienečne alebo v cykloch. K tomu sa ešte dostaneme. HTML kód je vnútri komponenty uzavretý tagom <template></template>.

Skript

Hlavným poslaním skriptu je exportovať javascriptový objekt obsahujúci konfiguráciu celej komponenty. Jednotlivé vlastnosti a metódy konfiguračného objektu si popíšeme neskôr, zatiaľ vidíme jedinú vlastnosť objektu a tou je názov komponenty - name. Táto časť komponenty je obalená tagom <script></script> a píšeme do nej čistý JavaScript.

Štýly

Komponent môže obsahovať štýlovanie, teda CSS kód. Pokiaľ dosah štýlovanie Neobmedzíte (o tzv. scoped styles bude reč neskôr), potom bude CSS, ktoré napíšeme v akejkoľvek komponente, platiť naprieč celou aplikácií. Štýly je tiež možné písať v syntaxi CSS preprocesorov (SASS, Stylus, apod.), My sme však pri generovaní projektu zvolili čisté CSS, podržíme sa teda tejto voľby. Štýlovanie je vo Vue komponente vymedzené tagom <style></style>.

Tlačidlo kalkulačky

Vytvorme si ešte jednu Vue komponent. Bude predstavovať tlačidlo v našej kalkulačke. Táto komponenta bude mať v aplikácii hneď niekoľko výskytov, člen The v jej názve teda nepoužijeme. Pomenujte ju CalculatorButton. Vytvoríme teda v adresári src/components/ súbor CalculatorButton.vue a vložíme do neho tento kód:

<template>
  <div class="calculator-button">C</div>
</template>
<script>
export default {
  name: 'CalculatorButton'
}
</script>

<style scoped>
.calculator-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .75em;
  font-size: 1.5rem;
  font-weight: bold;
  flex: 0 0 auto;
  width: 60px;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.calculator-button:active {
  transform: scale(.85);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .15)
}
.calculator-button:hover {
  background: #F2EDCF;
}
</style>

Súbor nemá nič nové, čo by sme nepoznali.

Registrácia komponenty

Vytvorili sme dve nové komponenty, ale zatiaľ sme ich nepoužili v aplikácii. Aby sme ich mohli použiť, musíme komponenty najskôr registrovať. Vo Vue môžeme komponenty registrovať dvoma spôsobmi, buď globálne alebo lokálne.

Lokálne registrácia

Týmto spôsobom registrujeme dcérskou komponent vnútri komponenty rodičovskej, teda presne tam, kde ju chceme použiť. Okrem rodičovskej komponenty ju však ostatné časti aplikácie poznať nebudú. V našom prípade potrebujeme komponent TheLayout použiť v komponente App.vue. Nikde inde v aplikácii ju používať nebudeme, lokálne registrácia nám teda plne postačuje.

Šablónu a skript v komponente App.vue upravíme takto (štýly ponecháme bez zmeny):

<template>
  <the-layout/>
</template>

<script>
import TheLayout from '@/components/TheLayout.vue'
export default {
  name: 'App',
  components: { TheLayout }
}
</script>

Všimnime si, že sme v skripte najprv importovali súbor, v ktorom sa naša komponent TheLayout nachádza. Znak @ v súborové ceste je aliasom pre adresár src/ as jeho pomocou si môžeme zjednodušovať prácu pri zadávaní globálnej súborové cesty vnútri ktorejkoľvek komponenty.

Importovaný súbor sme potom pod rovnakým názvom priradili do vlastnosti components konfiguračného objektu komponentu App.vue. Tým je lokálna registrácia dokončená, v komponente App.vue môžeme v tejto chvíli použiť komponent TheLayout v šablóne. A hneď sme to aj urobili.

Všimnite si, že v šablónach používame Vue komponenty ako HTML tagy písané notáciou kebab-case. Píšeme len malé písmená a jednotlivé slová oddeľujeme pomlčkou.

Globálnej registrácie

Komponenty, ktoré budeme v našom kóde užívať opakovane vo viacerých súboroch, môžeme registrovať globálne. Upravme kód v súbore src/main.js takto:

import { createApp } from 'vue'
import App from './App.vue'
import CalculatorButton from '@/components/CalculatorButton.vue'

createApp(App)
  .component('CalculatorButton', CalculatorButton)
  .mount('#app')

Tým sme globálne zaregistrovali našu komponent CalculatorButton a môžeme ju teraz použiť v akejkoľvek inej komponente naprieč celou aplikácií. A hneď to tiež urobíme - použijeme ju priamo v TheLayout. Upravme šablónu TheLayout takto:

<template>
  <div class="container">
    <div class="calculator">
      <div class="calculator-row">
        <div class="display"></div>
        <calculator-button />
      </div>
      <div class="calculator-row"/>
      <div class="calculator-row"/>
      <div class="calculator-row"/>
      <div class="calculator-row"/>
    </div>
  </div>
</template>

Naša kalkulačka v tejto chvíli vo webovom prehliadači vyzerá nasledovne:

Asi ste si všimli, že po uložení súboru sa nám súbory automaticky skontrolujú a v prehliadači sa stránka sama "obnoví".

V ďalšej lekcii, Dáta a Props v komponentoch , naplníme naše komponenty dátami. Naučíme sa zobrazovať dáta v šablónach, odovzdávať dáta z rodičovských do dcérskych komponentov a validovať ich.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.