vue.js实现一个计算器

git:https://git.oschina.net/jjtHappy/js_caculator.git为了学习vue.js，把一个基于js实现的计算器转换为vue.js单页应用模式。此次实操旨在学会运用vue.js，不注重计算器的样式，逻辑先简单的看一下基于js实现的计算器是怎样的1、html//只截取body里面的内容<body><div id="calcuator"><

hello_读书就是赚钱

9312人浏览 · 2017-03-06 23:15:51

hello_读书就是赚钱 · 2017-03-06 23:15:51 发布

这里写图片描述

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){
           ....
        }

    }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^