用 Vue3 做一個計算機

Demo

前置規劃

• 計算機將有 加減乘除 、 等號 、 全部清除 、 清除最後一個數字 的功能
• 計算機數值顯示將分別顯示: 1. 運算中的總和或運算過程(使用等號前) 2. 運算完成的總和(使用等號)
• 計算機將會有運算紀錄

運用

• localStorage
• array.push() / array.splice()
• v-for / v-on / :class
• includes()
• isNaN() NaN : 全名為 Not a Number ，代表不是數字
• parseInt(),toString()將字串轉為數字相加，再轉回字串寫入
• string.slice(begin,end) 不會擷取到end的
• switch / case

製作邏輯釐清

1. 點擊每個數字時，都要顯示在上放。 -- 需要製作一個變數紀錄目前顯示的數字
2. 點擊每個運算子時要有個變數去紀錄目前點了哪一個運算子
3. 如果已經點擊了運算子，再點擊數字時，上方應該要清空讓新的數字可以輸入。 -- 需要一個變數紀錄之前的數字。
4. 點擊等號時要計算目前的數字與上一次顯示的數字的運算結果。
5. 若在使用運算子前已經有兩個數值在運算，這兩個數值會先運算總和並顯示
6. 在沒有輸入'0'以外的數值前，就算連續按'0'需讓數值保持'0'，不能變'00'
7. 按下'='會把前面的紀錄放入歷史紀錄中
8. 監聽history點擊，切換isActived的值，同步切換class

卡關地方

製作時遇到最卡關的地方是，我希望這個計算機不限於兩個數值運算，我想要做出就算不使用'='而是持續按'運算子'也可以一直運算，其實這個並不難，只是一開始腦袋卡住很久。

理解說明:

觸發 運算子 的事件時， 若 previousValue 已經有被賦予數值，讓 currentValue 加入 previousValue，並讓previousValue被重新復值。 所以就算一直沒有按等號，運算的結果會一直被放在 previousValue 裡面， 除非按 RESET 才能清除。 但是這邊要注意的一點是，需要再設一個變數來放先前按的運算符。我想試著簡單的解釋: 我要做的運算: A + B - C = D。

• 按了第一個數值(A) -> A 會放入currentValue。
• 按下第一個運算子(+) -> + 會放入 operator。
• 按下第二個數值(B) -> B 照理來說要直接放入 currentValue，但是這樣 A 就會因為被覆蓋而消失。 解決方式就是把 A 放到另一個變數上(這邊設為previousValue)，因此我們要先判斷 currentValue 內有沒有數值，有的話，先把數值推入 previousValue，再重新賦值。
• 按下第二個運算子 (-) -> 這裡會變得比較複雜一點。 這裡來說，可以直接按下'='，判斷運算子為何後，就可以讓previousValue 和 currentValue 做運算。(但我希望可以不用按等於也持續向上加) 所以我們需要這樣做 ... 就像是按下第二個數值一樣，當按下第二個運算子時，照理來說，這個運算會被賦值到 operator 上，但是這就會出現一個問題: 它會蓋過我們第一個運算子。 第一個運算子的用處是讓第一個數值(A)和第二個數值(B)做運算。第二個運算子的用處是讓(第一個數值和第二個數值的合(A+B))與第三個數值(C)做運算。 所以我們需要再有一個變數給 previousOperator ， 接下來就和上面一樣了....