# 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](https://cli.vuejs.org/config/).


## 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.