Vue学习笔记（二）：简易计算器的实现

JASON丶LI

已于 2022-11-13 01:20:25 修改

阅读量1.4k

点赞数 2

分类专栏： Vue 文章标签： vue.js 学习 javascript

于 2022-11-13 01:20:16 首次发布

本文链接：https://blog.csdn.net/weixin_61908666/article/details/127827528

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客通过一个简单的Vue.js计算器应用，讲解了v-model双绑、v-on事件绑定以及select元素和parseInt方法的使用。同时，对比了直接使用运算符和parseInt进行计算的差异，并警告了使用eval()函数的安全风险，提倡使用更安全的编程实践。

摘要由CSDN通过智能技术生成

程序分析:

设定两个可供输入的数值，并设定双向绑定机制

<input type="text" v-model="n1">
<input type="text" v-model="n2">

设定四个可选的标点符号

<select v-model="bol">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
</select>

设定运行案件，开启启动程序，并绑定运算程序

<input type="button" value="=" :title="print" @click="button1">

设定输出值，并设定双向绑定

<input type="text" v-model="n3">

运算方案：

plan 1：

switch (this.bol){
    case '+':
        this.n3 = this.n1 + this.n2
        break;
    case '-':
        this.n3 = this.n1 - this.n2
        break;
    case '*':
        this.n3 = this.n1 * this.n2
        break;
    case '/':
        this.n3 = this.n1 / this.n2
        break;
}

plan 2：

switch (this.bol) {
    case '+':
        this.n3 = parseInt(this.n1) + parseInt(this.n2)
        break;
    case '-':
        this.n3 = parseInt(this.n1) - parseInt(this.n2)
        break;
    case '*':
        this.n3 = parseInt(this.n1) * parseInt(this.n2)
        break;
    case '/':
        this.n3 = parseInt(this.n1) / parseInt(this.n2)
        break;
}

plan 3：

var codeStr = 'parseInt(this.n1) ' + this.bol + ' parseInt(this.n2)'
this.n3 = eval(codeStr)

tips:

1. 如何定义一个基本的Vue代码结构

2. 插值表达式和 v-text

3. v-cloak

4. v-html

5. v-bind Vue提供的属性绑定机制缩写是 :

6. v-on Vue提供的事件绑定机制缩写是 @

7.v-model Vue提供的双向绑定机制

难点（新的知识点）：

1、<select> 参考：https://www.w3school.com.cn/tags/tag_select.asp

select 元素可创建单选或多选菜单

<select> 元素中的 <option> 标签用于定义列表中的可用选项

2、parseInt() 参考：Java parseInt() 方法 | 菜鸟教程

parseInt() 方法用于将字符串参数作为有符号的十进制整数进行解析。

如果方法有两个参数，使用第二个参数指定的基数，将字符串参数解析为有符号的整数。

语法:

所有 Number 派生类 parseInt 方法格式类似如下：

static int parseInt(String s)

static int parseInt(String s, int radix)

参数:

s -- 十进制表示的字符串。

radix -- 指定的基数。

返回值:

parseInt(String s): 返回用十进制参数表示的整数值。

parseInt(int i): 使用指定基数的字符串参数表示的整数 (基数可以是 10, 2, 8, 或 16 等进制数)

3、eval(string) 参考：eval() - JavaScript | MDN

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行

注意！！！！！！！！！！！！！！！！！！！！！！！！

永远不要使用 eval！

eval() 是一个危险的函数，它使用与调用者相同的权限执行代码。如果你用 eval() 运行的字符串代码被恶意方（不怀好意的人）修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个 eval() 被调用时的作用域，这也有可能导致一些不同方式的攻击。相似的 Function 就不容易被攻击。

eval() 通常比其他替代方法更慢，因为它必须调用 JS 解释器，而许多其他结构则可被现代 JS 引擎进行优化。

此外，现代 JavaScript 解释器将 JavaScript 转换为机器代码。这意味着任何变量命名的概念都会被删除。因此，任意一个 eval 的使用都会强制浏览器进行冗长的变量名称查找，以确定变量在机器代码中的位置并设置其值。另外，新内容将会通过 eval() 引进给变量，比如更改该变量的类型，因此会强制浏览器重新执行所有已经生成的机器代码以进行补偿。但是（谢天谢地）存在一个非常好的 eval 替代方法：只需使用 window.Function。这有个例子方便你了解如何将eval()的使用转变为Function()。

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>

    <div id="app">
    <!-- <h4>{{msg}}</h4> -->
    <!-- number 1 -->
    <input type="text" v-model="n1">
    <!-- symbol -->
    <!-- select 元素可创建单选或多选菜单 -->
    <!-- <select> 元素中的 <option> 标签用于定义列表中的可用选项 -->
    <select v-model="bol">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>    
    <!-- number 2 -->
    <input type="text" v-model="n2">
    <!-- button -->
    <input type="button" value="=" :title="print" @click="button1">
    <!-- print (n3) -->
    <input type="text" v-model="n3">
    </div>


    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                n1: 0,
                n2: 0,
                n3: 0,
                bol: '+',
                print:'输出'
            },
            methods:{
                button1()
                {
                    // plan 1
                    // switch (this.bol){
                    //     case '+':
                    //         this.n3 = this.n1 + this.n2
                    //         break;
                    //     case '-':
                    //         this.n3 = this.n1 - this.n2
                    //         break;
                    //     case '*':
                    //         this.n3 = this.n1 * this.n2
                    //         break;
                    //     case '/':
                    //         this.n3 = this.n1 / this.n2
                    //         break;
                    // }

                    // plan 2
                    // parseInt() 方法用于将字符串参数作为有符号的十进制整数进行解析。
                    // 如果方法有两个参数， 使用第二个参数指定的基数，将字符串参数解析为有符号的整数。
                    // 语法:
                    // 所有 Number 派生类 parseInt 方法格式类似如下：
                    // static int parseInt(String s)
                    // static int parseInt(String s, int radix)
                    // 参数:
                    // s -- 十进制表示的字符串。
                    // radix -- 指定的基数。
                    // 返回值:
                    // parseInt(String s): 返回用十进制参数表示的整数值。
                    // parseInt(int i): 使用指定基数的字符串参数表示的整数 (基数可以是 10, 2, 8, 或 16 等进制数)  
                    
                    
                    // switch (this.bol) {
                    //     case '+':
                    //         this.n3 = parseInt(this.n1) + parseInt(this.n2)
                    //         break;
                    //     case '-':
                    //         this.n3 = parseInt(this.n1) - parseInt(this.n2)
                    //         break;
                    //     case '*':
                    //         this.n3 = parseInt(this.n1) * parseInt(this.n2)
                    //         break;
                    //     case '/':
                    //         this.n3 = parseInt(this.n1) / parseInt(this.n2)
                    //         break;
                    // } 

                    // plan 3
                    // eval() 函数会将传入的字符串当做 JavaScript 代码进行执行
                    var codeStr = 'parseInt(this.n1) ' + this.bol + ' parseInt(this.n2)'
                    this.n3 = eval(codeStr)
                }
                
            }
        });
    </script>

</body>
</html>