Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se JavaScript
JavaScript týden

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


 

Předchozí článek
První aplikace ve Vue.js pomocí Vue CLI
Všechny články v sekci
Vue.js
Článek pro vás napsal Jakub Konečný
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (6)

 

 

Komentáře

Avatar
Tomáš Bajt
Člen
Avatar
Tomáš Bajt:12. srpna 22:22

Bude fakt super, jestli někdo rozšíří články o Vue, díky!

Odpovědět
12. srpna 22:22
Život je jednoduchý, to jen lidé si ho dělají složitým.
Avatar
Tomáš Daněk:19. srpna 23:01

V článku by bylo dobré opravit:

currentvalue = ''

na

currentvalue: ''

dále pak:

{{ currentval }}

na

{{ currentvalue }}

a zvolit jinou barvu než „lighten“, protože pokud je mi známo, tak webová barva „lighten“ neexistuje.

 
Odpovědět
19. srpna 23:01
Avatar
Jakub Konečný
Redaktor
Avatar
Odpovídá na Tomáš Daněk
Jakub Konečný:20. srpna 0:54

Upravil sem problémy se syntaxou, a lighten vážně existuje, je to efekt v CSS.

 
Odpovědět
20. srpna 0:54
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Tomáš Daněk:20. srpna 6:28

V CSS znám jen vlastnosti "mix-blend-mode", "background-blend-mode", a v SASS funkci lighten(barva, pro­centa)...

 
Odpovědět
20. srpna 6:28
Avatar
Jakub Konečný
Redaktor
Avatar
Odpovídá na Tomáš Daněk
Jakub Konečný:22. srpna 2:29

Zvláštní, fungovalo mi to i v normálním .css souboru.

 
Odpovědět
22. srpna 2:29
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.