概要
Vue.jsの入門として、何か作ってみたいという人向けです。
まず、通常のjsでeval電卓を作成し、Vue.jsを使って抽象化していきます。
実装
以下のような電卓を、最小構成で実装する。
index.htmlのonClickイベントにより、calc関数が呼ばれ、
クリックされたボタンに応じた処理をします。
通常のjsの場合
buttonタグの羅列が冗長であることが確認できる。
とりあえず、動かしたい人は、cloneして下さい。
clone
git clone https://github.com/Naoto92X82V99/calc.git
index.html
<html>
<head>
<meta charset ="utf-8">
<script src="script.js"></script>
</head>
<body>
<table id="calcTable">
<tr>
<td colspan="3"><input type="text" id="output" value="0"></td>
<td><button value="C" onClick="calc('C')">C</button></td>
</tr>
<tr>
<td><button onClick="calc('7')">7</button></td>
<td><button onClick="calc('8')">8</button></td>
<td><button onClick="calc('9')">9</button></td>
<td><button onClick="calc('/')">/</button></td>
</tr>
<tr>
<td><button onClick="calc('4')">4</button></td>
<td><button onClick="calc('5')">5</button></td>
<td><button onClick="calc('6')">6</button></td>
<td><button onClick="calc('*')">*</button></td>
</tr>
<tr>
<td><button onClick="calc('1')">1</button></td>
<td><button onClick="calc('2')">2</button></td>
<td><button onClick="calc('3')">3</button></td>
<td><button onClick="calc('-')">-</button></td>
</tr>
<tr>
<td><button onClick="calc('0')">0</button></td>
<td><button onClick="calc('.')">.</button></td>
<td><button onClick="calc('+')">+</button></td>
<td><button onClick="calc('=')">=</button></td>
</tr>
</table>
</body>
</html>
script.js
function calc(cmd){
const element = document.getElementById('output')
const value = element.value
if(cmd === '='){
element.value = eval(value)
}else if(cmd === 'C'){
element.value = '0'
}else if(value === '0') {
element.value = cmd
}else{
element.value += cmd
}
}
Vue.jsの場合
上記実装において、buttonタグの羅列が冗長であるため、Vue.jsで書き直してみる。
v-forを使うことで、繰り返し処理を記述できる。
とりあえず、動かしたい人は、cloneして下さい。
clone
git clone https://github.com/Naoto92X82V99/vue-calc.git
index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<table id="app">
<tr>
<td colspan="3"><input type="text" v-model="output"></td>
<td><button value="C" v-on:click="calc('C')">C</button></td>
</tr>
<tr v-for="row in items">
<td v-for="item in row">
<button v-on:click="calc(item)">{{ item }}</button>
</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
script.js
var app = new Vue({
el: '#app',
data: {
output: '0',
items: [
['7', '8', '9', '/'],
['4', '5', '6', '*'],
['1', '2', '3', '-'],
['0', '.', '+', '=']
]
},
methods: {
calc: function (cmd) {
if(cmd === '='){
this.output = eval(this.output)
}else if(cmd === 'C'){
this.output = '0'
}else if(this.output === '0') {
this.output = cmd
}else{
this.output += cmd
}
}
}
})
まとめ
Vue.jsを用いて、最小構成でeval電卓を実装しました。
間違い・指摘等があればコメントお願いします。