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
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.nazevpromenne, 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.
Komentáře


Zobrazeno 5 zpráv z 5.