- 这是第一份,之后会增加东西,都会放在压缩包里,测试地址会是最新的一版。文件里面注释全部写好了,便于理解,展示页面还没有css并且比较乱难以阅读----2020.10.2
测试地址:
- 这是第二份,更新了开方和求根,更新了界面,添加了css----2020.10.9
测试地址:
代码下载:
代码内容(第一份):
<!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>
此处评论已关闭