vue.js實現一個計算器
阿新 • • 發佈：2019-02-19
為了學習vue.js，把一個基於js實現的計算器轉換為vue.js單頁應用模式。
此次實操旨在學會運用vue.js，不注重計算器的樣式，邏輯
先簡單的看一下基於js實現的計算器是怎樣的
1、html
//只擷取body裡面的內容
<body>
<div id="calcuator">
<input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />
<div id="btn-list">
<div 可以看到這裡用的是傳統的div+css3進行佈局，這讓我聯想到了vue裡面的元件模式，接下里我會對這裡開始動手，把對應的模組以元件的模式拆出來
2、js
// JavaScript Document
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
var _string=new Array();
var _type;
//點選數字鍵呼叫的方法
function typetoinput(num)
{
.....
}
//點選操作鍵呼叫的方法
function operator(type)
{
.....
}
//用於計算結果
function result(value)
{
.....
}
//用於判讀是否是一個數字鍵
function checknum(inputvalue)
{
.....
}
這裡的js都是在html裡面通過on-click事件方法進行呼叫的，這裡可以想到vue裡面的事件繫結機制，我們可以把方法寫在 vue模型裡面，再繫結到事件裡面去
3、改造
1 首先，原來的計算方式是通過全域性的 _string, _type 記錄狀態，輸出框的狀態是通過<input> 標籤的name與value進行記錄的，因此，我們可以通過vue裡面的 data繫結來定義這些需要用到的變數，使用一個物件來代替原先對input屬性的引用
var calculator = new Vue({
el:'#calculator',
data:{
inputShow:{
value:'0',
name:''
},
string:[],
type:''
},
......2 定義元件，把原來的主框體拆成兩個子元件，分別為顯示框與鍵盤，通過元件的父子數值繫結，把父元件中的 inputShow 賦給子元件，再通過計算屬性把其中的value 展示出來，具體鍵盤裡面的鍵是直接寫html父標籤裡面的，因為我覺得此時的css的靜態的，所以不抽離出來，使用<slot> 佔位呈現。
html
<body>
//主元件
<div id="calculator">
//下面兩個分別為子元件
<!--顯示框-->
<input-box v-bind:input-show="inputShow">
</input-box>
<btn-list>
<div v-on:click="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">C</div>
<div v-on:click="operator('opposite')" class=" btn-30 btn-radius color-blue">+/-</div>
<div v-on:click="operator('percent')" class=" btn-30 btn-radius color-blue">%</div>
<div v-on:click="operator('backspace')" class=" btn-70 btn-radius color-red font-14">←</div>
<div v-on:click="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">7</div>
<div v-on:click="typetoinput('8')" class=" btn-30 btn-radius">8</div>
<div v-on:click="typetoinput('9')" class=" btn-30 btn-radius">9</div>
<div v-on:click="operator('plus')" class=" btn-30 btn-radius color-blue font-14">+</div>
<div v-on:click="operator('minus')" class=" btn-30 btn-radius color-blue font-14">-</div>
<div v-on:click="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">4</div>
<div v-on:click="typetoinput('5')" class=" btn-30 btn-radius">5</div>
<div v-on:click="typetoinput('6')" class=" btn-30 btn-radius">6</div>
<div v-on:click="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">×</div>
<div v-on:click="operator('divide')" class=" btn-30 btn-radius color-blue font-12">÷</div>
<div v-on:click="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">1</div>
<div v-on:click="typetoinput('2')" class=" btn-30 btn-radius">2</div>
<div v-on:click="typetoinput('3')" class=" btn-30 btn-radius">3</div>
<div v-on:click="operator('pow')" class=" btn-30 btn-radius color-blue font-14">ײ</div>
<div v-on:click="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">√</div>
<div v-on:click="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">0</div>
<div v-on:click="typetoinput('.')" class=" btn-30 btn-radius">.</div>
<div v-on:click="operator('result')" class=" btn-70 btn-radius color-red font-14">=</div>
</btn-list>
</div>
<script type="text/javascript" src="js/my-app.js"></script>
</body>vue
....
components:{
'input-box':{
props:['inputShow'],
computed: {
value:function () {
return this.inputShow.value
}
},
template:'<input id="input-box" type="text" size="21" maxlength="21" v-model="value" readonly="readonly">'
},
'btn-list':{
template:'<div id="btn-list"><slot></slot></div>'
}
},
.....3、根據html裡面可以看到我們使用了v-on:click="...." 對div裡面的onclick事件方法進行繫結，所以，我們只需要把原專案裡面的函式寫到vue裡面然後再繫結到事件上面就行了
js
//具體引數詳見上面
methods:{
result:function(value){
....
},
typetoinput:function(num){
....
},
checknum:function(inputvalue){
....
}
}