• 这是第一份，之后会增加东西，都会放在压缩包里，测试地址会是最新的一版。文件里面注释全部写好了，便于理解，展示页面还没有css并且比较乱难以阅读----2020.10.2
    测试地址：

https://vue.magicbeans001.work/vue/calView.html

  • 这是第二份，更新了开方和求根,更新了界面,添加了css----2020.10.9
    测试地址：

https://vue.magicbeans001.work/vue/calView1.html

代码下载：

vue3.zip

代码内容（第一份）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>

<body>


<div id="app">
    <h1>欢迎使用小豆子没有css的计算器</h1>
    <p>别问,问就是懒,只会抄css</p>
    <p>第一次使用请按CE按钮清除测试数据</p>

    <!-- 上课讲的组件,使用的template模板方法 -->
    <!-- 我在当中使用了':list'来绑定vm1中的resList,并把它作为名为list的变量传回去了. -->
    <!-- 在组件中通过props:['list']获取了传过来的list,在赋值给data(这当中有点问题不大的小问题,所以我建议先ce全部清空) -->
    <res-show :list="resList"></res-show>

    <!-- 计算器部分 :
        lastStr上一次计算的表达式,上一次的计算结果也会转换为字符串放在lastStr中.
            可以直接在文本框中修改,并且使用了watch监听,来显示长度.
        calStrLen表达式长度,主要用来测试发现问题用的
        showNum上一次计算结果
        result计算的结果(用来保存当次计算结果,会在计算结束清零,来进行下次计算)
    -->
    <div>
        <input type="text" v-model:value="calStr" />
        <br>
        上一次表达式为:{{lastStr}}
        <br />
        表达式长度为:{{calStrLen}}
        <br />
        结果为:{{showNum}}
        <br />
        用于测试的result值:{{result}}----//我发现这个值的渲染有问题,是在方法结束后，所以大多都是0
        <br />

        <!-- 喜闻乐见的绑定add(str)方法,按钮绑定带传值的方法,直接付给lastStr字符串末尾 -->
        <button @click="add('1')">1</button>
        <button @click="add('2')">2</button>
        <button @click="add('3')">3</button><br />
        <button @click="add('4')">4</button>
        <button @click="add('5')">5</button>
        <button @click="add('6')">6</button><br />
        <button @click="add('7')">7</button>
        <button @click="add('8')">8</button>
        <button @click="add('9')">9</button><br />
        <button @click="add('0')">0</button><br />

        <button @click="add('+')">+</button>
        <button @click="add('-')">-</button>
        <button @click="add('*')">*</button>
        <button @click="add('/')">/</button>
        <button @click="add('(')">(</button>
        <button @click="add(')')">)</button><br />

        <!-- del进行calStr字符串最后一个的删除,同时处理calStrLen长度(主要用来检查错误用的) -->
        <button @click="del">C</button>
        <!-- 重置为初始状态,全部重新赋值 -->
        <button @click="delAll">CE</button>
        <!-- 计算结果,注释在下面 -->
        <button @click="cal">=</button>
        <br />
    </div>
</div>


<!-- 上面用到的模板循环输出组件中的数组 -->
<template id='show1'>
    <div>
        <table>
            <tr>
                <!-- 组件的resList -->
                <td>历史结果为:</td>
                <td v-for="num in resList" :key="num">{{num}}<span>||</span></td>
            </tr>
        </table>
        <span>-----//我发现组件传值用data在list添加数据没问题，但在清空出了问题，我用了watch监听</span>
        <br /><br />
        <!-- 单纯用来查错用的，下面这里显示的是vm1的数组 -->
        <span>用于测试的vm1的list:{{list}}</span>
        <br /><br />
    </div>
</template>


<script>
    // 定义组件，我发现为啥组件要定义在vm上面,不然vm有时候不显示
    // 知道的和我讲下呗!!!!!!!!!!!!!!!!!!!!!!!!!
    Vue.component('res-show',{
        props:['list'],//传值,接受:list="resList"传过来的值
        template:'#show1',
        data(){
            return{
                resList:this.list,
                // 讲传过来的值赋予resList
            }
        },
        methods:{},
        watch:{
            list(newVal,oldVal){
                this.resList=newVal
                // 因为传值后更新有点小问题
                // 1.一开始有测试数组情况 和 有之前计算的历史记录情况 ，在这两个情况清空,再计算时组件的resList不更新了
                // 2.但我发现每次props一直是刷新的
                // 3.所以我想到了使用watch监听,一旦修改就重新赋值(性能方面不知道有啥问题)
            }
        }
    })

    // 一般路过的vm1创建
    var vm1 = new Vue({
        el: '#app',
        data: {
            showNum:'',//保存上次的结果
            lastStr:'',//保存上次的表达式
            calStr:'',//现在的表达式
            calStrLen:0,//现在的表达式的长度
            result:0,//现在当次计算的结果保存在这里,主要用于传值计算和清零准备下次运算,会赋值给showNum和push进resList
            resList:["这是我","用来测试的","字符串"]//保存历史结果的数组,就和里面的玩意一样,我用来测试组件传值的
        },
        methods: {
            add(str){
                //将对应按钮的值放在字符串后面
                this.calStr+=str
                // 长度当然要加一位，主要是我显示在页面用来查错的
                this.calStrLen=this.calStr.length
            },
            del(){
                // 长度0的时候当然不能删除,不然删的我人都要没了
                if(this.calStr.length>0){
                    // 在菜鸟教程页面找的字符串处理方法，顺带推荐下网址，用来查资料的
                    // https://www.runoob.com
                    // substr截取字符串substr(start,end)
                    // star开始位置,end结束位置
                    this.calStr=this.calStr.substr(0,this.calStr.length-1)
                    // 长度当然要刷新，不然我瞅啥
                    this.calStrLen=this.calStr.length
                }else{
                    // 没字符串就不给删
                    alert("不能删了哦")
                }
            },
            delAll(){
                // 消失吧数据!
                // 全部重置全部清空
                this.resList=[]
                this.calStr=''
                this.calStrLen=0
                this.result=0
            },
            cal(){
                // 计算当然查看是不是有数据,没有就不做，我也懒，没有数据的话就重置几个和表达式有关的数据，防止有问题
                if(this.calStr==''||this.calStr==null){
                    alert("表达式为空哦")
                    this.calStr=''
                    this.calStrLen=0
                    this.result=0
                    return;
                }

                // 这里偷懒了,应为想了想判断字符串表达式太麻烦了，有很多内容
                // 用了一个相对方便的方法eval(this.calStr);也是查到的
                // eval可以用来讲给的字符串参数直接计算
                // 那么就好办了,计算没问题就执行结果,计算有问题捕获错误就行
                try{
                    this.result=eval(this.calStr);//计算字符串,并保存结果
                    if(this.result==Infinity){//解决1/0问题,结果是Infinity，这是js的类型
                        // 基本数据类型：Undefined、Null、Boolean、Number、String，Symbol
                        // 引用数据类型 ：Object
                        // 还有个Nan:Not a number不算类型,计算有问题时候会显示
                        alert("求求你放过孩子吧,给你重置了")
                        this.calStr=''
                        this.calStrLen=0
                    }else{//其他计算问题都可以在这里加...不过大多数都可以捕获，所以事情很少...我好懒懒得写
                        this.resList.push(this.result)//当然要放到数组里显示
                        this.showNum=this.result//用于页面显示
                        this.lastStr=this.calStr//用于展示上一次的表达式
                        alert("结果为"+this.result)//页面提示,其实我是用来检查是否进try了
                        this.calStr=this.result.toString()
                        // 拿出来说下，毕竟result是number类型(js类型),没有长度没法watch,不加变字符串也没啥问题,加了就能显示字符串长度
                    }
                    this.result=0//结果清零，这就是为啥页面上一直是0的原因
                }catch(e){
                    //TODO handle the exception
                    // 偷懒偷懒偷懒偷懒偷懒偷懒
                    // 摸鱼真开心
                    alert("公式有误")
                    this.result=0
                }
            }
        },
        filters: {},// 定义私有过滤器
        directives: {},// 自定义私有指令
        watch:{
            // 监控长度
            calStr(newVal,oldVal){
                this.calStrLen=newVal.length
            }
        },
        computed:{},
        // 这个下面的不用看,自己写的模板....
        //接下载是创建时的事件
        beforeCreate() {},//初始化vm（vue自带的函数），第一个生命周期函数，表示实例完全初始化出来前，调用执行
        created(){},//初始化vm（用户定义的函数）第二个生命周期函数，在create中data和methods都已经初始化好了

        beforeMount(){},//将要挂载：这时遇到的第三个生命周期函数，表示模板已在内存中经编译完成（内存中），但是尚未把模板渲染到页面中去
        mounted(){},//第四个生命周期函数，表示内存中的模板已经真实的挂载到页面中，页面已经可以看到渲染好的页面

        //接下载是运行中的事件（when data change）
        beforeUpdate(){},//这时候表示我们的界面还没被更新，但是数据已经更新了
        updated(){}//执行时候页面和data数据。更新完成，页面·内存dom树·数据保持一致
    })
</script>
</body>
</html>

....

代码内容（第二份）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/bootstrap-3.3.7.css">
</head>

<body>
<!-- 更新了开方和求根,更新了界面,添加了css -->

<div id="app">
    <!-- 上课讲的组件,使用的template模板方法 -->
    <!-- 我在当中使用了':list'来绑定vm1中的resList,并把它作为名为list的变量传回去了. -->
    <!-- 在组件中通过props:['list']获取了传过来的list,在赋值给data(这当中有点问题不大的小问题,所以我建议先ce全部清空) -->
    <res-show :list="resList"></res-show>

    <!-- 计算器部分 :
        lastStr上一次计算的表达式,上一次的计算结果也会转换为字符串放在lastStr中.
            可以直接在文本框中修改,并且使用了watch监听,来显示长度.
        calStrLen表达式长度,主要用来测试发现问题用的
        showNum上一次计算结果
        result计算的结果(用来保存当次计算结果,会在计算结束清零,来进行下次计算)
    -->
    <div>
        <input type="text" class="form-control" style="background-color: lightpink" v-model:value="calStr" />
        <br />
        <table class="table table-bordered table-hover table-striped">
            <tr><td>上一次表达式为:{{lastStr}}</td></tr>
            <tr><td>表达式长度为:{{calStrLen}}</td></tr>
            <tr><td>结果为:{{showNum}}</td></tr>
        </table>
        <div>
            <!-- 喜闻乐见的绑定add(str)方法,按钮绑定带传值的方法,直接付给lastStr字符串末尾 -->
            <div style="float: left; margin-right: 40px;">
                <button class="btn btn-primary" @click="add('1')">1</button>
                <button class="btn btn-primary" @click="add('2')">2</button>
                <button class="btn btn-primary" @click="add('3')">3</button><br />
                <button class="btn btn-primary" @click="add('4')">4</button>
                <button class="btn btn-primary" @click="add('5')">5</button>
                <button class="btn btn-primary" @click="add('6')">6</button><br />
                <button class="btn btn-primary" @click="add('7')">7</button>
                <button class="btn btn-primary" @click="add('8')">8</button>
                <button class="btn btn-primary" @click="add('9')">9</button><br />
                <button class="btn btn-primary" @click="add('0')">0</button><br />
            </div>
            <div style="float: left; margin-right: 40px;">
                <button class="btn btn-primary" @click="add('+')">+</button>
                <button class="btn btn-primary" @click="add('-')">-</button>
                <button class="btn btn-primary" @click="add('*')">*</button>
                <button class="btn btn-primary" @click="add('/')">/</button><br /><br />
                <button class="btn btn-primary" @click="add('(')">(</button>
                <button class="btn btn-primary" @click="add(')')">)</button>
                <!-- Math.sqrt(x)用来计算开根,但是pow(a,b)能计算任意a的b次方根 -->
                <button class="btn btn-primary" @click="powR(2)">x²</button>
                <button class="btn btn-primary" @click="powR(0.5)">√</button><br />
            </div>
            <div style="float: left; margin-right: 40px;">
                <!-- del进行calStr字符串最后一个的删除,同时处理calStrLen长度(主要用来检查错误用的) -->
                <button class="btn btn-primary" @click="del">C</button><br /><br />
                <!-- 重置为初始状态,全部重新赋值 -->
                <button class="btn btn-primary" @click="delAll">CE</button><br /><br />
                <!-- 计算结果,注释在下面 -->
                <button class="btn btn-primary" @click="cal">=</button><br /><br />
                <br />
            </div>
        </div>

    </div>
</div>


<!-- 上面用到的模板循环输出组件中的数组 -->
<template id='show1'>
    <div>
        <table class="table table-bordered table-hover table-striped">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">欢迎使用小豆子计算器</h3>
                </div>
                <tr>
                    <!-- 组件的resList -->
                    <td>历史结果为:</td>
                    <td v-for="num in resList" :key="num">{{num}}</td>
                </tr>
            </div>
        </table>
        <br />
    </div>
</template>


<script>
    // 定义组件，我发现为啥组件要定义在vm上面,不然vm有时候不显示
    // 知道的和我讲下呗!!!!!!!!!!!!!!!!!!!!!!!!!
    Vue.component('res-show',{
        props:['list'],//传值,接受:list="resList"传过来的值
        template:'#show1',
        data(){
            return{
                resList:this.list,
                // 讲传过来的值赋予resList
            }
        },
        methods:{},
        watch:{
            list(newVal,oldVal){
                this.resList=newVal
                // 因为传值后更新有点小问题
                // 1.一开始有测试数组情况 和 有之前计算的历史记录情况 ，在这两个情况清空,再计算时组件的resList不更新了
                // 2.但我发现每次props一直是刷新的
                // 3.所以我想到了使用watch监听,一旦修改就重新赋值(性能方面不知道有啥问题)
            }
        }
    })

    // 一般路过的vm1创建
    var vm1 = new Vue({
        el: '#app',
        data: {
            showNum:'',//保存上次的结果
            lastStr:'',//保存上次的表达式
            calStr:'',//现在的表达式
            calStrLen:0,//现在的表达式的长度
            result:0,//现在当次计算的结果保存在这里,主要用于传值计算和清零准备下次运算,会赋值给showNum和push进resList
            resList:[]//保存历史结果的数组,就和里面的玩意一样,我用来测试组件传值的
        },
        methods: {
            add(str){
                //将对应按钮的值放在字符串后面
                this.calStr+=str
                // 长度当然要加一位，主要是我显示在页面用来查错的
                this.calStrLen=this.calStr.length
            },
            del(){
                // 长度0的时候当然不能删除,不然删的我人都要没了
                if(this.calStr.length>0){
                    // 在菜鸟教程页面找的字符串处理方法，顺带推荐下网址，用来查资料的
                    // https://www.runoob.com
                    // substr截取字符串substr(start,end)
                    // star开始位置,end结束位置
                    this.calStr=this.calStr.substr(0,this.calStr.length-1)
                    // 长度当然要刷新，不然我瞅啥
                    this.calStrLen=this.calStr.length
                }else{
                    // 没字符串就不给删
                    alert("不能删了哦")
                }
            },
            delAll(){
                // 消失吧数据!
                // 全部重置全部清空
                this.resList=[]
                this.calStr=''
                this.calStrLen=0
                this.result=0
            },
            cal(){
                // 计算当然查看是不是有数据,没有就不做，我也懒，没有数据的话就重置几个和表达式有关的数据，防止有问题
                if(this.calStr==''||this.calStr==null){
                    alert("表达式为空哦")
                    this.calStr=''
                    this.calStrLen=0
                    this.result=0
                    return;
                }
    
                // 这里偷懒了,应为想了想判断字符串表达式太麻烦了，有很多内容
                // 用了一个相对方便的方法eval(this.calStr);也是查到的
                // eval可以用来讲给的字符串参数直接计算
                // 那么就好办了,计算没问题就执行结果,计算有问题捕获错误就行
                try{
                    this.result=eval(this.calStr);//计算字符串,并保存结果
                    if(this.result==Infinity){//解决1/0问题,结果是Infinity，这是js的类型
                        // 基本数据类型：Undefined、Null、Boolean、Number、String，Symbol
                        // 引用数据类型 ：Object
                        // 还有个Nan:Not a number不算类型,计算有问题时候会显示
                        alert("求求你放过孩子吧,给你重置了")
                        this.calStr=''
                        this.calStrLen=0
                    }else{//其他计算问题都可以在这里加...不过大多数都可以捕获，所以事情很少...我好懒懒得写
                        this.resList.push(this.result)//当然要放到数组里显示
                        this.showNum=this.result//用于页面显示
                        this.lastStr=this.calStr//用于展示上一次的表达式
                        alert("表达式结果为"+this.result)//页面提示,其实我是用来检查是否进try了
                        this.calStr=this.result.toString()
                        // 拿出来说下，毕竟result是number类型(js类型),没有长度没法watch,不加变字符串也没啥问题,加了就能显示字符串长度
                    }
                    this.result=0//结果清零，这就是为啥页面上一直是0的原因
                }catch(e){
                    //TODO handle the exception
                    // 偷懒偷懒偷懒偷懒偷懒偷懒
                    // 摸鱼真开心
                    alert("公式有误")
                    this.result=0
                }
            },
            powR(num){
                this.cal()
                this.result=Math.pow(this.showNum,num)
                this.resList.push(this.result)//当然要放到数组里显示
                this.lastStr=this.showNum+"^"+num//用于展示上一次的表达式,从showNum拿数据来做表达式
                this.showNum=this.result//用于页面显示
                alert("开方结果为"+this.result)//页面提示,其实我是用来检查是否进try了
                this.calStr=this.result.toString()
                this.result=0
    
            }
        },
        watch:{
            // 监控长度
            calStr(newVal,oldVal){
                this.calStrLen=newVal.length
            }
        }
    })
</script>
</body>
</html>
最后修改：2020 年 10 月 21 日 12 : 10 AM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏