VUE分别使用普通方法、计算属性、监听器完成简易计算器

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分

----------------------------------------------------------------------------------------本人邮箱[email protected]