vue.js实现一个计算器

比眉伴天荒 2022-09-27 00:28 136阅读 0赞

![这里写图片描述][SouthEast]

git:[https://git.oschina.net/jjtHappy/js\_caculator.git][https_git.oschina.net_jjtHappy_js_caculator.git]

为了学习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 onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">C</div>
            <div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue">+/-</div>
            <div onclick="operator('percent')" class=" btn-30 btn-radius color-blue">%</div>
            <div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">←</div>
            <div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">7</div>
            <div onclick="typetoinput('8')" class=" btn-30 btn-radius">8</div>
            <div onclick="typetoinput('9')" class=" btn-30 btn-radius">9</div>
            <div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14">+</div>
            <div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14">-</div>
            <div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">4</div>
            <div onclick="typetoinput('5')" class=" btn-30 btn-radius">5</div>
            <div onclick="typetoinput('6')" class=" btn-30 btn-radius">6</div>
            <div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">×</div>
            <div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12">÷</div>
            <div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">1</div>
            <div onclick="typetoinput('2')" class=" btn-30 btn-radius">2</div>
            <div onclick="typetoinput('3')" class=" btn-30 btn-radius">3</div>
            <div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">×²</div>
            <div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">√</div>
            <div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">0</div>
            <div onclick="typetoinput('.')" class=" btn-30 btn-radius">.</div>
            <div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14">=</div>
        </div>
    </div>
    </body>

可以看到这里用的是传统的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里面然后再绑定到事件上面就行了

//具体参数详见上面
    methods:{
            result:function(value){ 
                ....
            },
            typetoinput:function(num){ 
               ....
            },
            checknum:function(inputvalue){ 
               ....
            }
    
        }

[SouthEast]: /images/20220708/a75fb3522da84237ac3f5103135120ac.png
[https_git.oschina.net_jjtHappy_js_caculator.git]: https://git.oschina.net/jjtHappy/js_caculator.git