Vue.js

Vue.md

Instalace

V případě, že není npm nainstalováno, tak pomocí správce balíčku dané distribuce lze jednoduše dostahovat. U linuxové distribuce Fedora by se jednalo o takovýto příkaz:

sudo dnf install npm

v terminálu stačí zadat:

npm i -g @vue/cli

Vytvoření projektu v terminálu

vue create jmeno-projektu

a zde pro rychlé spuštění vyberte Default (Vue 3 preview) čímž se dá považovat základní projekt za vytvořený.

Vytvoření projektu přes grafické prostředí

vue ui

otevře okno prohlížeče a zde je následně možné vytvořit projekt
a v dalším okně vybrat verzi Vue podobně, jako tomu bylo u postupu v příkazové řádce

Spuštění

ve složce, kde je projekt umístěn, stačí zadat přékaz

npm run serve

serve spustí lokálně server, který spravuje daný projekt a vypíše url adresu, na které je stránka k nahlédnutí (např. localhost:8080)

Syntaxe

Hello world!

Základní ukázkou je vypsání hello world. V složkové struktuře, která byla dříve vygenerovaná nalezneme soubor HelloWorld.vue, který se nachází v src/components. zde je uložena základní stránka, která slouží jako rozcestník použití jazyka Vue. Pro začátek však není potřeba, tudíž obsah závorek <template> </template> lze smazat a nahradit např. jednoduchým

  <div class="try">
    <h2> hello {{who}}</h2>
  </div>

do <srcipt></script> následně vložit

export default {
  name: "HelloWorld",
  props: {
    whos: String,
  },

a v souboru App.vue v <template> nastavit

<HelloWorld :who="world"/>

Výpis obsahu pole

pro výpis celého pole je zde využito v-foru, což může vypadat takto v <template>:

<div class="app">
    <ul>
      <li v-for="who in whos" :key="who">Hello {{ who }}</li>
      <li>Hello {{ userWhomToGreet }}</li>
    </ul>
  </div>

a do <script>:

export default {
  name: "HelloWorld",
  props: {
    whos: Array,
  },
 }

pro naplnění dat pak v App.vue do <script> přidat toto:

export default {
name: 'App',
components: {
  HelloWorld
},
data() {
  return {
    whoToGreet: [ 'Jan', 'Jana', 'Jaňátko' ]
  }
}

Načtení dat z formuláře

v <template> v souboru HelloWorld.vue stačí přidat jednoduché okno pro vstup dat:

<label>
    Vaše jméno
    <input type="text" v-model="userWhomToGreet" />
  </label>

a do <script> téhož souboru přidat:
userWhomToGreet: "", tj celý script bude zaítm vypadat takto:

export default {
  name: "HelloWorld",
  props: {
    whos: Array,
  },
  data() {
    return {
      userWhomToGreet: "",
    };
  },

Výpočty s uživatelský vstupem

pro práci s daty uživatele budeme potřebovat další dvě proměnné a ty uložíme do výše zmíněného data(), tedy:

 data() {
    return {
      userWhomToGreet: "",
      numberA: 0,
      numberB: 0
    };
  },

pro výpočty následně budeme potřebovat funkci, která bude taktéž uložena ve <script>

computed: {
    sumOfNumbers() {
      return Number(this.numberA) + Number(this.numberB);
    }
  },
  methods: {
    displaySum() {
      alert(`Sum of numbers is: ${this.sumOfNumbers}`);
    }
  }

první z těchto funkcí má za úkol vypočítat daný součet čísel a displaySum (jak název napovídá) se stará o zobrazení výsledku ve vyskakovacím okně. Pro zobrazení je však potřeba přidat do <template> tyto řádky

 <label>
    Číslo A
    <input type="number" v-model="numberA" />
  </label>
  <label>
    Číslo B
    <input type="number" v-model="numberB" />
  </label>
  <span>Výsledek: {{ sumOfNumbers }}</span>
  <button @click="displaySum">Zobraz výsledek</button>

změna se na stránce projeví okamžitě bez nutnosti aktualizovat okno prohlížeče.