基于Vue.js和JavaScript技术设计与实现的多功能Web计算器

周园园

摘要：Vue框架技術已经成为当今互联网时代前端开发中的重要技术之一，为了紧跟新技术的发展步伐，适应社会的需求，高职院校开设前端开发框架课程显得尤为重要。该文使用Vue.js框架设计实现了多功能Web计算器的项目，并使用CSS样式对外观进行了优化;使用JavaScript脚本实现了计算器的四则运算功能、求平方、开根号、求幂、三角函数运算、删除和清零等操作。通过该项目的实现不仅可以让高职学生快速掌握使用vue框架搭建项目，而且能让学生对于前端开发中各项技术的综合使用有一个深刻的体会。

关键词：Vue.js  CSS  JavaScript  Web计算器

中图分类号：TP32  文献标识码：A   文章编号：1672-3791（2022）06（b）-0000-00

A Multifunctional Web Calculator Based on Design and Implementation of Vue.js and JavaScript Technology

ZHOU Yuanyuan

（Hunan Open University（Hunan Network Engineering Vocational College），Changsha，Hunan Province，410004 China）

Abstract：Vue framework technology has become one of the important technologies in front-end development in today's Internet era. In order to keep up with the pace of new technologies and meet the needs of society， it is necessary for higher vocational colleges to offer front-end development framework courses. This article uses the Vue.js framework to design and implement a multi-functional web calculator project， and uses CSS styles to optimize the appearance; uses JavaScript scripts to implement the calculator's four arithmetic functions， square， square root， exponentiation， trigonometry Function operation， delete and clear operations. The realization of this project not only allows vocational students to quickly master the use of vue framework to build projects， but also enables students to have a profound experience in the comprehensive use of various technologies in front-end development.

Key Words：Vue.js; CSS; JavaScript; Web calculator

随着互联网开发技术的不断更新，前端开发和后端开发已经逐渐分离开来，前端开发进入了一个“大前端时代”，使用框架技术快速构建前端项目成为一种流行趋势。高职院校计算机软件技术专业开设前端开发框架课程十分紧迫。Vue框架是当前最流行的一种前端开发框架，使用Vue-cli可以快速搭建一个项目，设计一个多功能Web计算器案例项目，能让高职学生能熟练掌握“大前端时代”前端开发框架的使用。

1 Vue框架

Vue框架是一套用于构建用户界面的渐进式框架，采用自底向上增量开发的设计方式，其本质是JavaScript MVVM库，性能非常高，具有很快的数据渲染速度[1]，是目前最流行的前端框架之一。Vue框架的核心理念是MVVM模型，可将视图和模型进行动态绑定，能够更好地处理页面交互和逻辑，解决了Web开发中操作DOM、渲染数据等难题[2]。Vue官网提供vue-cli工具，可以帮助用户快速进行项目搭建，而且提供智能化的Vuex、Vuex-router库加载，让开发者只专注于视图层面的逻辑处理，不用过多在乎其他。

2 JavaScript

JavaScript是Web开发领域中的一种功能强大的高级脚本语言，主要用于开发交互式的Web页面，可以给网页增加各种的动态效果[3]，同时它也是一种面向对象的编程语言，提供了一系列的方法和函数来对网页中的标签进行操作。

3 CSS技术

CSS是一种计算机语言，用来美化Web页面的颜色、背景、边框、字体等HTML元素的外观[4]。CSS有丰富的样式定义，且易于使用和修改，其最大的特点是能够将网页外观与内容分离，将网页内容进行美化[5]。

4.1 设计思路

该项目是用vue-cli工具搭建，主要功能是实现一个Web计算器，解决日常学习和生活中要用到的计算问题。用户操作计算器的步骤如下：首先输入操作数，接着输入某一计算操作符，当输入结束点击“=”按键时，计算器给用户计算出结果，并显示在输入框中。如果继续点击计算操作符，该计算器则会继续进行下一轮的计算。

根据设计思路的分析，该次设计的计算器运算符包括加、减、乘、除、清零、删除、求N次幂、开平方根、求SIN值、COS值、TAN值、lg值、ln2的值。界面设计需分区明显，便于操作，设计完成后的界面如图1所示。

从Web计算器效果界面可以看出来，它由3个部分组合成一个整体，共同组成了这个多功能Web计算器。将计算功能部分分成了3个div区域，分别是保存0-9数字的div（图中间部分）、存放运算符的div（图左边部分）以及存放四则运算的div（图右边部分），使得整个页面一目了然、整齐美观，在各个标签上增加了id属性和class属性，以便对样式进行设置。具体代码如图2所示。

CSS代码

仅依靠THML标签还不能完全满足本次项目的外观设计，还需要利用CSS对标签的样式进行设置。具体代码如图3所示。

计算器各个功能的实现

多功能Web计算器的功能主要有5大部分：（1）输入功能（2）四则运算功能（3）三角函数计算功能（4）开根号，e的N次幂，π的计算（5）单击“AC”按钮清除数据，恢复到空白状态（6）单击“delete”按钮，删除数字或者运算符，实现退格的作用。具体可以分解为以下6个部分。

4.4.1 输入功能的实现

Web计算器进行计算，要首先能接收用户的输入。该项目编写了个<input>标签，使用v-model标签双向绑定，来接收用户的输入，该input框还显示计算结果。当用户输入计算数字时，存储在info对象的value，value2中，输入的符号存储在info对象中的handle中，最后程序计算出结果。输入框代码和info对象的实现如图4所示。

4.4.2四则运算功能的实现

在methods中定义的handleResult方法中，用户输入3个参数。分别是2个操作数，一个操作符，进行简单的四则运算，具体代码如图5所示。

4.4.3 三角函数计算功能

在methods中定义的handleResult方法中，接收1个操作数，1个操作符，直接调用JavaScript中的Math类的方法[6]，进行三角函数计算，具体代码如图6所示。

4.4.4 开根号，e的N次幂，π等其他的计算

同样在methods中定義的handleResult方法中，可以接收1个操作数作为参数，直接调用JavaScript中的Math类的方法，进行开根号、e的N次幂、π等等的计算，具体代码如图7所示。

4.4.5 清除功能的实现

在methods的clickHandle方法中，对用户的点击进行判断，如果点击的是“AC”按钮 ，那么将用户输入的数据进行清除，并将显示在输入框中的全部数据设置为空，整个函数进行返回，以便进行下一轮计算操作。代码如图8所示。

4.4.6 删除功能的实现

同样还是在clickHandle方法中，如果用户点击的是“delete”按钮，而且输入框有数据显示，那就利用substring方法将数据从后往前逐个删掉，否则不进行删除操作，具体代码如图9所示。

结语

该项目使用vue-cli快速搭建了一个Web计算器项目，并实现了多功能计算器的功能。通过CSS代码对该计算器的外观进行了优化，设计函数并利用JavaScript的数学函数来实现计算功能。设计与实现此多功能Web计算器可以让学生快速掌握vue-cli搭建项目的步骤和方法，使用数据绑定和组件调用，使得学生对vue.js的综合技术应用更加熟练，为后续复杂的项目开发打下坚实的理论和操作基础。

参考文献

[1] 孟艳齐.基于vue.js的英语核心素养平台的设计与实现[D].北京：北京邮电大学，2021.

[2] 徐小辉，刘江涛，高涵，等.基于SpringBoot+Vue框架的采气方案系统开发[J].计算机仿真，2021，38（6）：248-250，382.

[3] 李晶晶.新视角下的JavaScript课程教学研究[J].软件，2021，42（12）：31-33，82.

[4] 李英.浅谈DIV+CSS网页布局技术[J]. 电脑知识与技术，2021，17（35）：155-157.

[5] 刘心美.DIV+CSS网页布局的设计与实现[J].科技资讯，2021，19（30）：14-16.

[6] 胡雅丽.基于BootStrap+JavaScript语言简易计算器的实现[J].太原学院学报：自然科学版，2020，38（1）：73-76.