Fullstack Dev

Krok za krokem vytváříme jednoduchou aplikaci

Vue.js je progresivní JavaScriptový framework široce používaný pro tvorbu uživatelských rozhraní. V tomto díle projdeme jak nastavit a vytvořit jednoduchou aplikaci ve Vue.js, přičemž zvýrazníme klíčové koncepty a funkce.

Nastavení Vue aplikace

Později budeme používat Vue s pomocí Vite. Nyní si to nebudeme komplikovat a vložíme odkaz na Vue přímo do HTML souboru pomocí odkazu na Vue.js CDN:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Vytvoření šablony

Vue potřebuje vědět kde má začít. To uděláme tak, že zadefinujeme <div> s atributem id. Toto bude místo, kde se vaše Vue aplikace namountuje:

<div id="app"></div>">

Zde může být i jiný selektor např. třída. Konvencí je použít id=“app”. Vue vybere tento element pomocí metod dostupných na document jako je např. document.querySelector, aby zobrazil obsah vaší aplikace.

Inicializace Vue instance

Krok 1: Nastavení aplikace

Teď už můžeme přejít rovnou na psaní logiky aplikace. Začneme tak, že vytvoříme Vue instanci pomocí metody createApp a namountujte ji na cílový prvek (app.mount):

const app = Vue.createApp({
  setup() {
      // Zde jde logika aplikace
  },
});

app.mount('#app');

Krok 2: Použití funkce setup pro logiku

Do funkce setup budeme psát logiku své aplikace. Zde definujete reaktivní data a metody pro svou Vue aplikaci.

Vue 3 používá composition API - což je to co používáme my. Je to novější přístup. Ve Vue 2 se používal options API. Options API zmíníme, ale nebudeme jej primárně používat, i když je možné používat obojí současně.

setup() {
  let message = 'Ahoj Vue 3!';

  return {
      message,
  };
}

Cokoliv co budeme chtít používat v šabloně je potřeba vrátit z funkce pomocí return. Pro zobrazování dat používáme v šablony dvojité (chlupaté) závorky v HTML:

<p>{{ message }}</p>

Dynamické vykreslování dat

Vykreslování hodnot nekončí pouze u stringu. Můžeme používat i další typy např. boolean nebo pole.

Zobrazení řetězců, booleanů a polí

<div id="app">
  <p>Datum: {{ today }}</p>
  <p>Jméno: {{ petName }}</p>
  <p>Spí: {{ isSleeping ? 'ano' : 'ne' }}</p>
  <p>Oblíbené hračky: {{ favoriteToys.join(', ') }}</p>
</div>

Aby nám to fungovalo je potřeba v setup funkci definovat odpovídající proměnné (a dát do return):

setup() {
  const petName = "Cleo";
  const isSleeping = true;
  const favoriteToys = ['míček', 'laserové ukazovátko', 'peříčková hůlka'];
  const today = new Date().toLocaleString();

  return {
      petName,
      isSleeping,
      favoriteToys,
      today,
  };
}

Zobrazení objektů

Co by to bylo za aplikaci kdybychom nemohli používat objekty:

Vše funguje, tak jak známe z javascript. Používáme název objektu, tečku a pak klíč objektu

<p>Věk: {{ metadata.age }} rok(ů)</p>
<p>Hmotnost: {{ metadata.weight }} kg</p>

Definujte objekt v setup:

const metadata = {
  weight: 5,
  age: 2,
};

Vracení dat

Aby byly proměnné dostupné v šabloně, ujistěte se, že jsou vráceny z funkce setup:

return {
  petName,
  isSleeping,
  favoriteToys,
  metadata,
  today,
};

Podmíněné vykreslování

Můžete použít klasický if/else - k tomu se dostaneme pozdějí. Zatím využijeme ternary operator.

Pokud je isSleeping true tak se vykreslí ano. V opačném případě to bude ne.

<p>Spí: {{ isSleeping ? 'ano' : 'ne' }}</p>

Použití funkcí

V Javascriptu je funkce first class citizen, proto by bylo divné kdybych nemohli v šabloně (HTML) zavolat funkci.

Pokud chceme naformávat datum, tak např. můžeme zavolat funkci toLocaleString().

setup() {
  const greeting = `Ahoj, dnes je 3/1/2025, 12:36:36 PM`;
  return { greeting };
}

Poté zobrazte vypočítaný pozdrav v šabloně:

<p>{{ greeting }}</p>

Jak Vue funguje pod kapotou

• Počáteční vykreslení: Vue zpracuje DOM a odstraní zástupný text nebo prvky

• Reaktivní vykreslování: Vue vykreslí šablonu dynamicky na základě reaktivních dat definovaných v setup

• Aktualizace: Pokud se data změní, Vue automaticky aktualizuje DOM, aby odrážel nejnovější stav

Příklad: Kompletní aplikace

Zde je kompletní kód Vue.js aplikace:

<!DOCTYPE html>
<html>
<head>
<title>Vue.js Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
      <p>Datum: {{ today }}</p>
      <p>Jméno: {{ petName }}</p>
      <p>Spí: {{ isSleeping ? 'ano' : 'ne' }}</p>
      <p>Oblíbené hračky: {{ favoriteToys.join(', ') }}</p>
      <p>Věk: {{ metadata.age }} rok(ů)</p>
      <p>Hmotnost: {{ metadata.weight }} kg</p>
  </div>

  <script>
      const app = Vue.createApp({
          setup() {
              const petName = "Cleo";
              const isSleeping = true;
              const favoriteToys = ['míček', 'laserové ukazovátko', 'peříčková hůlka'];
              const metadata = {
                  weight: 5,
                  age: 2,
              };
              const today = new Date().toLocaleString();

              return {
                  petName,
                  isSleeping,
                  favoriteToys,
                  metadata,
                  today,
              };
          },
      });

      app.mount('#app');
  </script>
</body>
</html>

Video

Nerad čteš, tak mrkni na video 👇

Funkce a Metody: Composition API vs. Options API