I'm assuming you've read through a Vue introduction. I used this one. You can play with an example of my calculator code here. I'll assume you have that open when explaining the other parts.

#### Basic setup

The calculator is a div whose id is 'calculator'. It has a result section for the display, and a buttons section for the buttons. Each button has a click method and a class for styling. The Vue instance is the calculator.

#### Data

The primary piece of data here is the value displayed in the calculator. I also keep track of the last operator entered (+, -, *, /). The current operator is not used in the HTML, but the displayValue is.

Since it is only changed by the JS, I'm using Vue's {{ }} notation.

data: { displayValue: '0', currentOp: '', },

Since it is only changed by the JS, I'm using Vue's {{ }} notation.

<span style="background: #FEFEFE; min-height: 45px">{{ displayValue }}</span>

#### Methods

Each button corresponds to a method. There's one for each operation, and a general one for the digits. The logic is pretty straightforward so just check out the code:

I am calling these using Vue's @ notation:

methods: { clear() { this.displayValue = '0'; this.leftValue = '0'; this.clearFlags(); }, //when +, -, *, or / are clicked (i.e., buttons that go between two values) addOp(op) { this.currentOp = op; this.leftValue = this.displayValue; this.clearNext = true; }, log() { this.displayValue = Math.log10(this.displayValue); this.clearFlags(); }, inverse() { this.displayValue = 1 / this.displayValue; this.clearFlags(); }, //when number is added...left of decimal, shift all digits to the left one and add the number...right of decimal, just add the number addDigit(val) { if (this.clearNext) { this.displayValue = '0'; this.clearNext = false; } if (val === '.') { if (this.decimalDisabled) { } else { this.displayValue += '.'; } } else { if (this.decimalDisabled) { this.displayValue += val; } else { this.displayValue = this.displayValue * 10 + val; } } }, //= button clicked evaluate() { if (this.equalDisabled) { } else { this.displayValue = parseFloat(this.displayValue); this.leftValue = parseFloat(this.leftValue); if (this.currentOp === '+') { this.displayValue = this.leftValue + this.displayValue; } else if (this.currentOp === '-') { this.displayValue = this.leftValue - this.displayValue; } else if (this.currentOp === '*') { this.displayValue = this.leftValue * this.displayValue; } else if (this.currentOp === '/') { this.displayValue = this.leftValue / this.displayValue; } this.clearFlags(); } }, clearFlags() { this.currentOp = ''; this.clearNext = true; } },

I am calling these using Vue's @ notation:

<div class="button" @click="clear">C</div>

#### Computed

To disable buttons when they can't do anything, I am using Vue's computed properties:

//set disabled behavior based on fields that determine it...deicmal disabled if already decimal and equal disabled if no operator computed: { decimalDisabled: function () { return this.displayValue.toString().includes('.'); }, equalDisabled: function () { return this.currentOp === ''; } }

These are used to pick the appropriate class for the buttons that they affect using Vue's class binding:

<div :class="{ button: true, disabledButton: equalDisabled }" @click="evaluate">=</div>

#### Summary

That's it. It was remarkably simple to get a functioning calculator using Vue. It took me ~2 hours total, and I'd never used Vue before and JavaScript is not my primary language. This does not use everything available in Vue obviously, but it felt like a decent first sample project to try out. If you don't want to copy from codepen, I've also posted the code here.

## 0 comments:

## Post a Comment