Letenka

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Teorie

data

Slouží pro uchování informací ať už z pohledu uživatele, např. zvolené sedadlo nebo počet osob. Tak i z pohledu aplikace, např. maximální počet osob, seznam sedadel nebo letišť.

Sekce data se zapisuje:

data: () => {
    return {
        mojeData: 123,
        neboJinaData: "textový řetězec",
    }
}

methods

Jde prakticky o funkce, které lze volat odkudkoli v rámci komponmenty. Jak ze šablony (např. nastavPocetOsob), tak i z jiných metod (např. pocetVybranychSedadel).

Sekce methods se zapisuje:

methods: {
    mojeFunkce: function() { /* kód funkce */ },
    dalsiSpecialniFunkce: function() { /* kód funkce */ },
}

V metodách se k datům přistupuje přes klíčové slovo this. Např.

this.mojeData

watch

Hlídače mají funkci sledování dat (ze sekce data), přičemž dojde-li ke změně hodnoty v datech, zavolá se odpovídající funkce watcheru.

Sekce watch se zapisuje:

watch: {
    nazevData: function() { },
}

Šablony

výpis dat do HTML

Pomocí dvojitých složených závorek:

<p>{{ mojeData }}</p>

v-model

Technika, která se používá při práci s formulářovými poli (input, select, ...). Jako parametr se zadaji data, do kterých se bude ukládat uživatelem zvolená/zadaná hodnota.

<select v-model="mojeData"></select>

V sekci data je tedy třeba definovat mojeData.

v-for

Možno cyklicky vypsat html element(y) podle seznam (pole) v Javascriptu.

v-on:click

Událost kliknutí na element uživatelem.

v-bind:class

Podmíněné vložení/odebrání CSS třídy pro daný element.