VUE分别使用普通方法、计算属性、监听器完成简易计算器
声明：本方法使用VUE完整框架独立模块组件来实现
TOP：实现效果
Ⅰ：完整框架
Ⅱ：框架实现案例组件功能细分
1.APP组件
总组件，管理所有组件(每个单独的组件最后都汇总到APP组件里,便于管理)
管理汇总:Methodss组件、Watchss.vue组件、Computedss.vue组件
1.Methodss.vue组件
定义普通方法实现简易计算器的功能
3.Watchss.vue组件
定义监听器实现简易计算器的功能
4.Computedss.vue组件
定义计算属性实现简易计算器的功能
Ⅲ：组件内容功能细分
1.template标签
负责HTML结构,标签里面写HTML结构
2.script标签
负责与页面的交互也就是和HTML的动态交互
3.style标签
负责HTML的结构样式也就是写CSS
4.style标签里的scoped
限制样式的使用范围(只局限于本组件使用)
Ⅳ：代码实现
1.普通方法实现简易计算器
<template>
<div>
<h1>我是调用普通方法:</h1>
<input type="number" placeholder="请输入第一个数" v-model.number="number1">
//多选标签
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" placeholder="请输入第二个数" v-model.number="number2">
<button @click="numInfo()">计算</button> //使用普通方法函数需要手动调用
<h2>结果为:{{results}}</h2>
//点击按钮得到的计算结果
</div>
</template>
<script>
//要想在本组件注册其他组件需导入其他组件
//import School from "@/components/School";
//暴露组件,不暴露的话其他组件不能进行引入
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Methodss", //给组件注册的名字,以防调用者乱起名
//import引入的组件需要注入到对象中才能使用",
components: {},
data() {
//这里存放数据",
return {
number1: '', //用户输入第一个数
number2: '', //用户输入第二个数
opt: '+', //运算符号
results: '' //计算返回的结果
};
},
//监听属性 类似于data概念",
computed: {},
//监控data中的数据变化",
watch: {},
//方法集合",
methods: {
numInfo(){
//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码,直接能识别加减乘除符号,识别的数学字符串当成数 //学式子进行相加减
this.results = eval(this.number1 + this.opt + this.number2)
//用户调用方法把计算后的结果给到变量results
}
},
}
</script>
<style scoped>
div{
background-color: pink;
}
</style>
2.监听器实现简易计算器
<template>
<div>
<h1>我是监听器方法:</h1>
<input type="number" placeholder="请输入第一个数" v-model.number="num.number1">
<select v-model="num.opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" placeholder="请输入第二个数" v-model.number="num.number2">
<h2>结果为:{{results}}</h2>
</div>
</template>
<script>
//要想在本组件注册其他组件需导入其他组件
//import School from "@/components/School";
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Watchss", //给组件注册的名字,以防调用者乱起名
//import引入的组件需要注入到对象中才能使用",
components: {},
data() {
//这里存放数据",
return {
//监听发生变化后计算的结果
results: '',
//把所要发生变化进行监听的数据放到一个数组里面,便于监听
num:{ //数组统一管理数据
number1: '', //用户输入第一个数
number2: '', //用户输入第二个数
opt: '+', //运算符
},
};
},
//监听属性 类似于data概念",
computed: {},
//监控data中的数据变化",
watch: {
//'num.number1' 'num.number2' 'num.opt' 监视数组里面单独
//监视整个数组里面的所有数据
num:{
deep:true, //需要加上这个方法，不加上的话不会产生监视效果
handler(){
//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码,直接能识别加减乘除符号,识别的数学字符串 //当成数学式子进行相加减，把进行发生变化的数据计算后给到变量results进行展示
this.results = eval(parseInt(this.num.number1+0) + this.num.opt + parseInt(this.num.number2+0))
//这里的’ +0 ‘是防止输入数字时结果直接展示为NaN不好看(可有可无)
}
}
},
//方法集合",
methods: {},
}
</script>
<style scoped>
div{
background-color: bisque;
}
</style>
3.计算属性实现简易计算器
<template>
<div>
<h1>我是计算属性方法:</h1>
<input type="number" placeholder="请输入第一个数" v-model.number="number1">
//多选标签
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" placeholder="请输入第二个数" v-model.number="number2">
<h2>结果为:{{results}}</h2>
//直接使用计算属性返回的结果
</div>
</template>
<script>
//要想在本组件注册其他组件需导入其他组件
//import School from "@/components/School";
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Computedss", //给组件注册的名字,以防调用者乱起名
//import引入的组件需要注入到对象中才能使用",
components: {},
data() {
//这里存放数据",
return {
number1: '', //用户输入第一个数
number2: '', //用户输入第二个数
opt: '+', //运算符号
};
},
//计算属性 类似于data概念",
computed: {
results(){
//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码,直接能识别加减乘除符号,识别的数学字符串 //当成数学式子进行相加减，把进行发生变化的数据计算后给到变量results进行展示
return eval(parseInt(this.number1+0) +this.opt + parseInt(this.number2+0))
//计算属性必须要有返回值,把计算的结果进行返回,直接使用即可
//这里的’ +0 ‘是防止输入数字时结果直接展示为NaN不好看(可有可无)
}
},
//监控data中的数据变化",
watch: {},
//方法集合",
methods: {}
}
</script>
<style scoped>
div{
background-color: lavender;
}
</style>
Ⅴ：总结
普通方法
主要就是定义普通方法进行调用接收就行了
监听器
主要就是监听自身数据所发生的变化
特别注意的是监视同一个东西为多个属性数据时,把多个属性数据放到一个数组里面进行监视这样更方便
计算属性
主要就是计算完数据要有返回值
特别注意的是计算属性的函数方法要有返回值,直接使用双花括号接收就行
eval系统函数方法
函数可计算某个字符串，并执行其中的的 JavaScript 代码,直接能识别加减乘除符号,识别的数学字符串当成数学式子进行相加减，把进行发生变化的数据计算后给到变量results进行展示
还可以解析多个符号进行计算
Ⅵ：案例素材:
网盘提取：
链 接： https://pan.baidu.com/s/1oynFqzd9HTORVuuWaYKOug
提取码： tf26
Ⅶ：致谢
本人在校学生一枚,也是第一次接触案例使用方法,本案例方法不一定全,也不一定最方便
!希望各位都能! -------欢迎大家的指导,本人以此感谢!
!成为自己心目! --------热爱IT行业的一枚小白IT闯
!中的 大牛! --------2023年3月31日 18点33分
----------------------------------------------------------------------------------------本人邮箱1097910448@qq.com