Lekce 2 - Komponenty ve Vue

V minulé lekci, Úvod do Vue a první aplikace, jsme si něco řekli o Vue a vytvořili kostru našeho nového projektu.

V této lekci si představíme Vue komponentu jako základní stavební prvek aplikace. Seznámíme se se strukturou Vue komponenty a s tím, jak se komponenty využívají napříč aplikací.

Komponenta ve VueJS

Každá VueJS aplikace se skládá z jednotlivých komponent. Komponenta je vlastně základní stavební prvek v aplikaci obsahující šablonu HTML, CSS stylování a skript, ve kterém řídíme práci s daty a logiku chování komponenty.

Komponenty je možné definovat i uvnitř jiných komponent, my se však podržíme konceptu Single File Components - každá komponenta v naší aplikaci bude reprezentována jedním souborem s koncovkou .vue.

Všechny komponenty, které budeme v aplikaci postupně vytvářet, budeme shromažďovat v adresáři src/components/. Jedinou výjimkou bude kořenová komponenta App.vue, kterou jsme si představili v minulé lekci a která byla vygenerována automaticky při vytvoření projektu - ta zůstává uložena přímo v adresáři src/.

Příprava

Pro začátek si upravme základní kořenovou komponentu App.vue tak, abychom se mohli zbavit souborů, které v naší aplikaci nebudeme upravovat. Soubor App.vue zeditujeme do této 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 souboru jsme vymazali import předdefinované komponenty HelloWorld a její registraci ve skriptu, obsah šablony jsme nahradili prázdným elementem <div>.

V adresáři src/components/ nyní můžeme vymazat nepotřebný soubor HelloWorld.vue a v adresáři src/assets/ smažme nepotřebný obrázek logo.png.

V tuto chvíli máme aplikaci zcela prázdnou a jsme připraveni na vytváření vlastních komponent. Když si nyní zobrazíme projekt ve webovém prohlížeči, uvidíme prázdnou stránku.

V komponentě App.vue jsme také nastavili některé globální CSS styly. Psaní stylů v komponentách si detailněji vysvětlíme později.

Tvorba nové komponenty

První komponenta, kterou si nakódíme, se bude jmenovat TheLayout. Bude jakýmsi obalem naší kalkulačky. Je dobrým zvykem pojmenovávat komponenty dvouslovnými názvy, v šablonách s nimi totiž budeme pracovat jako s HTML elementy a dvouslovný název nám bezpečně vylučuje možnost kolize názvu s již existujícím HTML tagem. Dvou i víceslovné názvy komponent zapisujeme v notaci CamelCase. Další dobré pravidlo, kterého se podržíme, je zvláštní označování komponent, které budou v celé aplikaci použity pouze jednou. Pro označení takových komponent užíváme právě anglický určitý člen The jako první slovo názvu - proto se nová komponenta tedy bude jmenovat TheLayout.

V adresáři src/components/ tedy vytvořme nový soubor s názvem TheLayout.vue. Pro začátek do něj 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>

Struktura komponenty

Vue komponenta se skládá ze tří částí - šablony, skriptu a stylů, přičemž první dvě tyto součásti jsou povinné. Komponenta nemusí obsahovat styly, pokud je nepotřebujeme.

Šablona

V šabloně píšeme HTML kód, tedy elementy, které bude komponenta v aplikaci zobrazovat. Podobně jako v jiných šablonovacích systémech můžeme do HTML kódu vkládat datový obsah, pomocí direktiv můžeme renderovat některé části HTML kódu podmíněně nebo v cyklech. K tomu se ještě dostaneme. HTML kód je uvnitř komponenty uzavřen tagem <template></template>.

Skript

Hlavním posláním skriptu je exportovat JavaScriptový objekt obsahující konfiguraci celé komponenty. Jednotlivé vlastnosti a metody konfiguračního objektu si popíšeme později, prozatím vidíme jedinou vlastnost objektu a tou je název komponenty - name. Tato část komponenty je obalena tagem <script></script> a píšeme do ní čistý JavaScript.

Styly

Komponenta může obsahovat stylování, tedy CSS kód. Pokud dosah stylování neomezíme (o tzv. scoped styles bude řeč později), pak bude CSS, které napíšeme v jakékoliv komponentě, platit napříč celou aplikací. Styly je také možné psát v syntaxi CSS preprocesorů (SASS, Stylus, apod.), my jsme však při generování projektu zvolili čisté CSS, podržíme se tedy této volby. Stylování je ve Vue komponentě vymezeno tagem <style></style>.

Tlačítko kalkulačky

Vytvořme si ještě jednu Vue komponentu. Bude představovat tlačítko v naší kalkulačce. Tato komponenta bude mít v aplikaci hned několik výskytů, člen The v jejím názvu tedy nepoužijeme. Pojmenujme ji CalculatorButton. Vytvoříme tedy v adresáři src/components/ soubor CalculatorButton.vue a vložíme do něj 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>

Soubor nemá nic nového, co bychom neznali.

Registrace komponenty

Vytvořili jsme dvě nové komponenty, ale zatím jsme je nepoužili v aplikaci. Abychom je mohli použít, musíme komponenty nejdříve registrovat. Ve Vue můžeme komponenty registrovat dvěma způsoby, buď globálně nebo lokálně.

Lokální registrace

Tímto způsobem registrujeme dceřinou komponentu uvnitř komponenty rodičovské, tedy přesně tam, kde ji chceme použít. Kromě rodičovské komponenty ji však ostatní části aplikace znát nebudou. V našem případě potřebujeme komponentu TheLayout použít v komponentě App.vue. Nikde jinde v aplikaci ji používat nebudeme, lokální registrace nám tedy plně postačuje.

Šablonu a skript v komponentě App.vue upravíme takto (styly ponecháme beze změny):

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

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

Všimněme si, že jsme ve skriptu nejprve importovali soubor, ve kterém se naše komponenta TheLayout nachází. Znak @ v souborové cestě je aliasem pro adresář src/ a s jeho pomocí si můžeme zjednodušovat práci při zadávání globální souborové cesty uvnitř kterékoliv komponenty.

Importovaný soubor jsme pak pod stejným názvem přiřadili do vlastnosti components konfiguračního objektu komponenty App.vue. Tím je lokální registrace dokončena, v komponentě App.vue můžeme v tuto chvíli použít komponentu TheLayout v šabloně. A hned jsme to i udělali.

Všimněte si, že v šablonách používáme Vue komponenty jako HTML tagy psané notací kebab-case. Píšeme jen malá písmena a jednotlivá slova oddělujeme pomlčkou.

Globální registrace

Komponenty, které budeme v našem kódu užívat opakovaně ve více souborech, můžeme registrovat globálně. Upravme kód v souboru 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 jsme globálně zaregistrovali naši komponentu CalculatorButton a můžeme ji nyní použít v jakékoliv jiné komponentě napříč celou aplikací. A hned to také uděláme - použijeme ji přímo v TheLayout. Upravme šablonu 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še kalkulačka v tuto chvíli ve webovém prohlížeči vypadá takto:

Asi jste si všimli, že po uložení souboru se nám soubory automaticky zkontrolují a v prohlížeči se stránka sama "obnoví".

V další lekci, Data a props v komponentách ve Vue, naplníme naše komponenty daty. Naučíme se zobrazovat data v šablonách, předávat data z rodičovských do dceřiných komponent a validovat je.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.