基于Vue.js和JavaScript技術(shù)設(shè)計(jì)與實(shí)現(xiàn)的多功能Web計(jì)算器

周園園

摘要：Vue框架技術(shù)已經(jīng)成為當(dāng)今互聯(lián)網(wǎng)時(shí)代前端開(kāi)發(fā)中的重要技術(shù)之一，為了緊跟新技術(shù)的發(fā)展步伐，適應(yīng)社會(huì)的需求，高職院校開(kāi)設(shè)前端開(kāi)發(fā)框架課程顯得尤為重要。該文使用Vue.js框架設(shè)計(jì)實(shí)現(xiàn)了多功能Web計(jì)算器的項(xiàng)目，并使用CSS樣式對(duì)外觀進(jìn)行了優(yōu)化;使用JavaScript腳本實(shí)現(xiàn)了計(jì)算器的四則運(yùn)算功能、求平方、開(kāi)根號(hào)、求冪、三角函數(shù)運(yùn)算、刪除和清零等操作。通過(guò)該項(xiàng)目的實(shí)現(xiàn)不僅可以讓高職學(xué)生快速掌握使用vue框架搭建項(xiàng)目，而且能讓學(xué)生對(duì)于前端開(kāi)發(fā)中各項(xiàng)技術(shù)的綜合使用有一個(gè)深刻的體會(huì)。

關(guān)鍵詞：Vue.js??CSS??JavaScript??Web計(jì)算器

中圖分類號(hào)：TP32??文獻(xiàn)標(biāo)識(shí)碼：A???文章編號(hào)：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

隨著互聯(lián)網(wǎng)開(kāi)發(fā)技術(shù)的不斷更新，前端開(kāi)發(fā)和后端開(kāi)發(fā)已經(jīng)逐漸分離開(kāi)來(lái)，前端開(kāi)發(fā)進(jìn)入了一個(gè)“大前端時(shí)代”，使用框架技術(shù)快速構(gòu)建前端項(xiàng)目成為一種流行趨勢(shì)。高職院校計(jì)算機(jī)軟件技術(shù)專業(yè)開(kāi)設(shè)前端開(kāi)發(fā)框架課程十分緊迫。Vue框架是當(dāng)前最流行的一種前端開(kāi)發(fā)框架，使用Vue-cli可以快速搭建一個(gè)項(xiàng)目，設(shè)計(jì)一個(gè)多功能Web計(jì)算器案例項(xiàng)目，能讓高職學(xué)生能熟練掌握“大前端時(shí)代”前端開(kāi)發(fā)框架的使用。

1?Vue框架

Vue框架是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)方式，其本質(zhì)是JavaScript?MVVM庫(kù)，性能非常高，具有很快的數(shù)據(jù)渲染速度[1]，是目前最流行的前端框架之一。Vue框架的核心理念是MVVM模型，可將視圖和模型進(jìn)行動(dòng)態(tài)綁定，能夠更好地處理頁(yè)面交互和邏輯，解決了Web開(kāi)發(fā)中操作DOM、渲染數(shù)據(jù)等難題[2]。Vue官網(wǎng)提供vue-cli工具，可以幫助用戶快速進(jìn)行項(xiàng)目搭建，而且提供智能化的Vuex、Vuex-router庫(kù)加載，讓開(kāi)發(fā)者只專注于視圖層面的邏輯處理，不用過(guò)多在乎其他。

2?JavaScript

JavaScript是Web開(kāi)發(fā)領(lǐng)域中的一種功能強(qiáng)大的高級(jí)腳本語(yǔ)言，主要用于開(kāi)發(fā)交互式的Web頁(yè)面，可以給網(wǎng)頁(yè)增加各種的動(dòng)態(tài)效果[3]，同時(shí)它也是一種面向?qū)ο蟮木幊陶Z(yǔ)言，提供了一系列的方法和函數(shù)來(lái)對(duì)網(wǎng)頁(yè)中的標(biāo)簽進(jìn)行操作。

3?CSS技術(shù)

CSS是一種計(jì)算機(jī)語(yǔ)言，用來(lái)美化Web頁(yè)面的顏色、背景、邊框、字體等HTML元素的外觀[4]。CSS有豐富的樣式定義，且易于使用和修改，其最大的特點(diǎn)是能夠?qū)⒕W(wǎng)頁(yè)外觀與內(nèi)容分離，將網(wǎng)頁(yè)內(nèi)容進(jìn)行美化[5]。

4.1?設(shè)計(jì)思路

該項(xiàng)目是用vue-cli工具搭建，主要功能是實(shí)現(xiàn)一個(gè)Web計(jì)算器，解決日常學(xué)習(xí)和生活中要用到的計(jì)算問(wèn)題。用戶操作計(jì)算器的步驟如下：首先輸入操作數(shù)，接著輸入某一計(jì)算操作符，當(dāng)輸入結(jié)束點(diǎn)擊“=”按鍵時(shí)，計(jì)算器給用戶計(jì)算出結(jié)果，并顯示在輸入框中。如果繼續(xù)點(diǎn)擊計(jì)算操作符，該計(jì)算器則會(huì)繼續(xù)進(jìn)行下一輪的計(jì)算。

根據(jù)設(shè)計(jì)思路的分析，該次設(shè)計(jì)的計(jì)算器運(yùn)算符包括加、減、乘、除、清零、刪除、求N次冪、開(kāi)平方根、求SIN值、COS值、TAN值、lg值、ln2的值。界面設(shè)計(jì)需分區(qū)明顯，便于操作，設(shè)計(jì)完成后的界面如圖1所示。

從Web計(jì)算器效果界面可以看出來(lái)，它由3個(gè)部分組合成一個(gè)整體，共同組成了這個(gè)多功能Web計(jì)算器。將計(jì)算功能部分分成了3個(gè)div區(qū)域，分別是保存0-9數(shù)字的div（圖中間部分）、存放運(yùn)算符的div（圖左邊部分）以及存放四則運(yùn)算的div（圖右邊部分），使得整個(gè)頁(yè)面一目了然、整齊美觀，在各個(gè)標(biāo)簽上增加了id屬性和class屬性，以便對(duì)樣式進(jìn)行設(shè)置。具體代碼如圖2所示。

CSS代碼

僅依靠THML標(biāo)簽還不能完全滿足本次項(xiàng)目的外觀設(shè)計(jì)，還需要利用CSS對(duì)標(biāo)簽的樣式進(jìn)行設(shè)置。具體代碼如圖3所示。

計(jì)算器各個(gè)功能的實(shí)現(xiàn)

多功能Web計(jì)算器的功能主要有5大部分：（1）輸入功能（2）四則運(yùn)算功能（3）三角函數(shù)計(jì)算功能（4）開(kāi)根號(hào)，e的N次冪，π的計(jì)算（5）單擊“AC”按鈕清除數(shù)據(jù)，恢復(fù)到空白狀態(tài)（6）單擊“delete”按鈕，刪除數(shù)字或者運(yùn)算符，實(shí)現(xiàn)退格的作用。具體可以分解為以下6個(gè)部分。

4.4.1?輸入功能的實(shí)現(xiàn)

Web計(jì)算器進(jìn)行計(jì)算，要首先能接收用戶的輸入。該項(xiàng)目編寫(xiě)了個(gè)<input>標(biāo)簽，使用v-model標(biāo)簽雙向綁定，來(lái)接收用戶的輸入，該input框還顯示計(jì)算結(jié)果。當(dāng)用戶輸入計(jì)算數(shù)字時(shí)，存儲(chǔ)在info對(duì)象的value，value2中，輸入的符號(hào)存儲(chǔ)在info對(duì)象中的handle中，最后程序計(jì)算出結(jié)果。輸入框代碼和info對(duì)象的實(shí)現(xiàn)如圖4所示。

4.4.2四則運(yùn)算功能的實(shí)現(xiàn)

在methods中定義的handleResult方法中，用戶輸入3個(gè)參數(shù)。分別是2個(gè)操作數(shù)，一個(gè)操作符，進(jìn)行簡(jiǎn)單的四則運(yùn)算，具體代碼如圖5所示。

4.4.3?三角函數(shù)計(jì)算功能

在methods中定義的handleResult方法中，接收1個(gè)操作數(shù)，1個(gè)操作符，直接調(diào)用JavaScript中的Math類的方法[6]，進(jìn)行三角函數(shù)計(jì)算，具體代碼如圖6所示。

4.4.4?開(kāi)根號(hào)，e的N次冪，π等其他的計(jì)算

同樣在methods中定義的handleResult方法中，可以接收1個(gè)操作數(shù)作為參數(shù)，直接調(diào)用JavaScript中的Math類的方法，進(jìn)行開(kāi)根號(hào)、e的N次冪、π等等的計(jì)算，具體代碼如圖7所示。

4.4.5?清除功能的實(shí)現(xiàn)

在methods的clickHandle方法中，對(duì)用戶的點(diǎn)擊進(jìn)行判斷，如果點(diǎn)擊的是“AC”按鈕?，那么將用戶輸入的數(shù)據(jù)進(jìn)行清除，并將顯示在輸入框中的全部數(shù)據(jù)設(shè)置為空，整個(gè)函數(shù)進(jìn)行返回，以便進(jìn)行下一輪計(jì)算操作。代碼如圖8所示。

4.4.6?刪除功能的實(shí)現(xiàn)

同樣還是在clickHandle方法中，如果用戶點(diǎn)擊的是“delete”按鈕，而且輸入框有數(shù)據(jù)顯示，那就利用substring方法將數(shù)據(jù)從后往前逐個(gè)刪掉，否則不進(jìn)行刪除操作，具體代碼如圖9所示。

結(jié)語(yǔ)

該項(xiàng)目使用vue-cli快速搭建了一個(gè)Web計(jì)算器項(xiàng)目，并實(shí)現(xiàn)了多功能計(jì)算器的功能。通過(guò)CSS代碼對(duì)該計(jì)算器的外觀進(jìn)行了優(yōu)化，設(shè)計(jì)函數(shù)并利用JavaScript的數(shù)學(xué)函數(shù)來(lái)實(shí)現(xiàn)計(jì)算功能。設(shè)計(jì)與實(shí)現(xiàn)此多功能Web計(jì)算器可以讓學(xué)生快速掌握vue-cli搭建項(xiàng)目的步驟和方法，使用數(shù)據(jù)綁定和組件調(diào)用，使得學(xué)生對(duì)vue.js的綜合技術(shù)應(yīng)用更加熟練，為后續(xù)復(fù)雜的項(xiàng)目開(kāi)發(fā)打下堅(jiān)實(shí)的理論和操作基礎(chǔ)。

參考文獻(xiàn)

[1] 孟艷齊.基于vue.js的英語(yǔ)核心素養(yǎng)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[D].北京：北京郵電大學(xué)，2021.

[2] 徐小輝，劉江濤，高涵，等.基于SpringBoot+Vue框架的采氣方案系統(tǒng)開(kāi)發(fā)[J].計(jì)算機(jī)仿真，2021，38（6）：248-250，382.

[3] 李晶晶.新視角下的JavaScript課程教學(xué)研究[J].軟件，2021，42（12）：31-33，82.

[4] 李英.淺談DIV+CSS網(wǎng)頁(yè)布局技術(shù)[J].?電腦知識(shí)與技術(shù)，2021，17（35）：155-157.

[5] 劉心美.DIV+CSS網(wǎng)頁(yè)布局的設(shè)計(jì)與實(shí)現(xiàn)[J].科技資訊，2021，19（30）：14-16.

[6] 胡雅麗.基于BootStrap+JavaScript語(yǔ)言簡(jiǎn)易計(jì)算器的實(shí)現(xiàn)[J].太原學(xué)院學(xué)報(bào)：自然科學(xué)版，2020，38（1）：73-76.