基于Vue.js和JavaScript技术设计与实现的
多功能Web计算器
周园园
(湖南开放大学(湖南网络工程职业学院)湖南长沙410004)
摘要：Vue框架技术已经成为当今互联网时代前端开发中的重要技术之一，为了紧跟新技术的发展步伐，适应社会的需求，高职院校开设前端开发框架课程显得尤为重要。该文使用Vue.js框架设计实现了多功能Web计算器的项目，并使用CSS样式对外观进行了优化；使用JavaScript脚本实现了计算器的四则运算功能、求平方、开根号、求幂、三角函数运算、删除和清零等操作。通过该项目的实现不仅可以让高职学生快速掌握使用Vue框架搭建项目，而且能让学生对于前端开发中各项技术的综合使用有一个深刻的体会。
关键词：Vue.js CSS JavaScript Web计算器
中图分类号：TP32文献标识码：A文章编号：1672-3791(2022)06(b)-0010-04
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 par‐ticularly important 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 implementation of this project can not only enable higher vocational students to quickly master the use of Vue frame
work to build projects,but also enable students to have a deep understanding of the comprehensive use of various technologies in front-end development.
Key Words:Vue.js;CSS;JavaScript;Web calculator
随着互联网开发技术的不断更新，前端开发和后端开发已经逐渐分离开来，前端开发进入了一个“大前端时代”，使用框架技术快速构建前端项目成为一种流行趋势。高职院校计算机软件技术专业开设前端开发框架课程十分紧迫。Vue框架是当前最流行的一种前端开发框架，使用Vue-cli可以快速搭建一个项目，设计一个多功能Web计算器案例项目，能让高职学生能熟练掌握“大前端时代”前端开发框架的使用。
1Vue框架
Vue框架是一套用于构建用户界面的渐进式框架，采用自底向上增量开发的设计方式，其本质是JavaScript MVVM库，性能非常高，具有很快的数据渲
DOI：10.16661/jki.1672-3791.2203-5042-2320
作者简介：周园园（1992—），女，硕士，助教，研究方向为职业教育、软件开发、人工智能。
染速度[1]，是目前最流行的前端框架之一。Vue 框架的核心理念是MVVM 模型，可将视图和模型进行动态绑定，能够更好地处理页面交互和逻辑，解决了Web 开发中操作DOM、渲染数据等难题[2]。Vue 提供Vue-cli 工具，可以帮助用户快速进行项目搭建，而且提供智能化的Vuex、Vuex-router 库加载，让开发者只专注于视图层面的逻辑处理，不用过多在乎其他。
2JavaScript
JavaScript 是Web 开发领域中的一种功能强大的高级脚本语言，主要用于开发交互式的Web 页面，可以给网页增加各种的动态效果[3]，同时它也是一种面向
对象的编程语言，提供了一系列的方法和函数来对网页中的标签进行操作。
3CSS 技术
CSS 是一种计算机语言，用来美化Web 页面的颜、背景、边框、字体等HTML 元素的外观[4]
。CSS 有丰富的样式定义，且易于使用和修改，其最大的特点是能
够将网页外观与内容分离，将网页内容进行美化[5]。
4设计实现
4.1设计思路
该项目是用Vue-cli 工具搭建，主要功能是实现一
图1Web 计算器界面
图2Vue 页面布局代码
图3页面样式代码
个Web 计算器，解决日常学习和生活中要用到的计算问题。用户操作计算器的步骤如下：首先输入操作数，接着输入某一计算操作符，当输入结束点击“=”按键时，计算器给用户计算出结果，并显示在输入框中。如果继续点击计算操作符，该计算器则会继续进行下一轮的计算。4.2实现界面
根据设计思路的分析，该次设计的计算器运算符包括加、减、乘、除、清零、删除、求N 次幂、开平方根、求SIN 值、COS 值、TAN 值、lg 值、ln2的值。界面设计需分区明显，便于操作，设计完成后的界面具体见图1。4.2Vue 代码
从Web 计算器效果界面可以看出，它由3个部分组合成一个整体，共同组成了多功能Web 计算器。将计算功能部分分成了3个div 区域，分别是保存0~9数字的div （图中间部分）、存放运算符的div （图左边部分）、存放四则运算的div （图右边部分），使整个页面一
目了然、整齐美观，在各个标签上增加了id 属性和class
属性，以便对样式进行设置。具体代码具体见图2。4.3CSS 代码仅依靠THML 标签还不能完全满足本次项目的外观设计，还需要利用CSS 对标签的样式进行设置。具体代码具体见图3。4.4计算器各个功能的实现
多功能Web 计算器的功能主要有5大部分：（1）输入功能；（2）四则运算功能；（3）三角函数计算功能；（4）开根号，e 的N 次幂，π的计算；（5）单击“AC”按钮清除数据，恢复到空白状态；（6）单击“delete”按钮，删除数字或者运算符，实现退格的作用。具体可以分解为以下
6个部分。4.4.1
输入功能的实现
Web 计算器进行计算，要首先能接收用户的输入。
该项目编写了个<input>标签，使用v-model
标签双向
图4输入功能实现代码
图5四则运算实现代码
图6三角函数计算实现代码图7其他计算实现代码
绑定，来接收用户的输入，该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。
js脚本开发5结语
该项目使用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.
图8清除功能实现代码
图9delete 功能实现代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。