Lekce 3 - Kalkulačka ve Vue.js

V předchozí lekci, První aplikace ve Vue.js pomocí Vue CLI, jsme vytvořili Vue.js aplikaci pomocí Vue CLI a napsali naši první komponentu.

Vítejte u další lekce on-line kurzu Vue.js. V dnešním tutoriálu začneme pracovat na našem komponentu kalkulačky a tak si ukážeme novou syntaxi Vue.js.

Naše výsledná kalkulačka bude v této podobě:

Struktura HTML

Jak by mělo tedy vypadat naše HTML pro kalkulačku? Prvně by jsme měli mít nějaké tlačítka a ukazatel nynější hodnoty. Tlačítka by se poté měly rozdělovat na ty, které přidávají čísla či operace.

Prvně si tedy vytvoříme displej pro naší kalkulačku. Budeme v této lekci upravovat pouze soubor src/components/Calculator.vue:

<template>
    <div class="calculator">
        <div class="calc-display">0</div>
    </div>
</template>

Máme hotový displej pro naši kalkulačku v podobě textu uvnitř tagu <div> s třídou .calc-display. Jako další si uděláme tlačítka pro číslice:

<template>
    <div class="calculator">
        <div class="calc-display">0</div>
        <div class="calc-btns">
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
        </div>
    </div>
</template>

Všechny tlačítka jsme si dali do společného tagu <div> s třídou .calc-btns. Jejich pořadí je možná trošičku matoucí, ale až ji nastylujeme, bude dávat smysl.

Struktura JS

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Teď můžeme začít pracovat na funkcionalitě displeje a přidávání číslic:

<script>
export default {
    name: 'Calculator',
    data() {
        return {
            currentvalue: ''
        }
    }
}
</script>

Uvnitř našeho skriptu pojmenujeme náš komponent 'Calculator' a využijeme funkci data, kterou má Vue.js zabudovanou, aby jsme nastavili currentvalue na prázdný string. Tato proměnná nám bude držet výsledek kalkulačky. Poté aktualizujeme HTML kód, aby ukazoval currentvalue ve třídě .calc-display:

<div class="calc-display" v-if="currentvalue == ''">0</div>
<div class="calc-display" v-else>{{ currentvalue }}</div>

Přepsali jsme tedy <div> s třídou calc-display na dva. Jeden používá podmínku Vue v-if, druhý v-else. Pokud je tedy v podmínce proměnná currentvalue s hodnotou "prázdný string", ukáže nulu. V opačném případě ukáže pomocí v-else přímo proměnnou currentvalue.

Metody

Nyní se můžeme vrhnout na funkce, nebo spíše metody, jak to Vue.js nazývá.

Metody jsou, jak jsem už zmínil, funkce ve Vue.js, které dokážou upravovat data uvnitř funkce data(). Na naše data referujeme pomocí syntaxe this.nazevpro­menne, stejně jako bychom to dělali v JS objektu / třídě.

<script>
export default {
    name: 'Calculator',
    data() {
        return {
            currentvalue: '',
        }
    },
    methods: {
        addDigit(digit) {
            this.currentvalue += digit
        },
    }
</script>

Vytvořili jsme funkci addDigit() s jediným parametrem pro číslo, které přidáme do proměnné currentvalue. Teď můžeme přidat tlačítkům novou funkcionalitu, kterou jsme napsali.

To uděláme pomocí atributu v-on. Dá se zapsat i pomocí @. Zrovna u tlačítek nás zajímá event v-on:click. Přidáme tlačítkům tedy atribut @click s názvem metody a jejími parametry.

Pokud bychom do parametrů chtěli dát string, musíme použít apostrofy ' ', protože uvozovky " už používá HTML.

<div class="calc-btns">
    <button @click="addDigit(7)">7</button>
    <button @click="addDigit(8)">8</button>
    <button @click="addDigit(9)">9</button>
    <button @click="addDigit(4)">4</button>
    <button @click="addDigit(5)">5</button>
    <button @click="addDigit(6)">6</button>
    <button @click="addDigit(1)">1</button>
    <button @click="addDigit(2)">2</button>
    <button @click="addDigit(3)">3</button>
</div>

Na závěr dnešní lekce si kalkulačku nastylujeme:

<style scoped>
* {
    font-family: 'SF Mono';
}

.calculator {
    width: 30%;
    margin: auto;
    margin-top: 20vh;
    box-shadow: 0px 0px 20px lightgray;
    border-radius: 10px;
}

button {
    font-size: 2rem;
    border: none;
    outline: none;
    background-color: lighten;
    filter: brightness(105%);
    text-shadow: 2px 2px 2px lightgray;
}

button:hover {
    filter: brightness(100%);
}

.calc-btns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 6rem);
}

.zero {
    grid-column: span 2;
}

.calc-display {
    text-align: center;
    font-size: 3rem;
    padding: 1rem 0rem;
}

.purple {
    background-color: #be8abf;
    color: white;
}

.orange {
    background-color: #f8c3af;
    color: white;
}
</style>

Pokud nemáme stažený font SF Mono, můžeme si ho buď stáhnout z odkazu nebo můžeme použít jakýkoliv jiný font. Musíme ho ale specifikovat.

Jako první se můžeme kouknout na <style scoped>, který říká Vue, že tyto styly chceme aplikovat pouze na elementy uvnitř tohoto komponentu, tím pádem se nestane, že by nám styly "vytekly" do ostatních komponent.

V CSS na tlačítka použijeme nejprve vlastnost display na hodnotu grid. Díky této vlastnosti můžeme kontrolovat, kolik položek se bude nacházet v jednom řádku, to nám zajistí také další vlastnost grid-template-columns na hodnotě repeat(4, 1fr).

Dále jsme přidali barvy na určitá tlačítka po pravé straně a poupravili barvu při najetí na tlačítko, aby měla aplikace trošku dynamický pocit.

DO HTML struktury si přidáme ještě další tlačítka pro budoucí operandy:

<div class="calc-btns">
    <button>x²</button>
    <button>CE</button>
    <button>C</button>
    <button class="orange">x</button>
    <button @click="addDigit('7')">7</button>
    <button @click="addDigit('8')">8</button>
    <button @click="addDigit('9')">9</button>
    <button class="orange">/</button>
    <button @click="addDigit('4')">4</button>
    <button @click="addDigit('5')">5</button>
    <button @click="addDigit('6')">6</button>
    <button class="orange">+</button>
    <button @click="addDigit('1')">1</button>
    <button @click="addDigit('2')">2</button>
    <button @click="addDigit('3')">3</button>
    <button class="orange">-</button>
    <button class="zero" @click="addDigit('0')">0</button>
    <button @click="addDigit('.')">.</button>
    <button class="purple">=</button>
</div>

Kalkulačka vypadá takto, avšak některá tlačítka nemají stále žádnou akci:

To bude pro dnešní lekci vše.