用vue制作一个简易计算机

使用Vue.js创建一个简单的计算器可以分为几个步骤：

1. **安装 Vue**：首先需要确保已经安装了 Node.js 和 npm（Node包管理器）。然后通过命令行运行 `npm install -g vue` 安装Vue CLI。

2. **创建项目**：创建一个新的Vue项目，运行 `vue create calculator-app` 并选择默认选项。

3. **结构组织**：在 `src` 文件夹下，你可以创建一个名为 `components` 的文件夹，用于存放计算器组件（如 Calculator.vue）。

4. **编写 Calculator 组件**：

   <template>
     <div class="calculator">
       <input type="text" v-model.number="result" />
       <div class="buttons">
         <!-- 数字按钮 -->
         <button v-for="(number, index) in numbers" :key="index" @click="handleClick(number)">
           {{ number }}
         </button>
         <!-- 运算符按钮 -->
         <button @click="clearResult">C</button>
         <button @click="performOperation('+')">+</button>
         <button @click="performOperation('-')">-</button>
         <button @click="performOperation('*')">*</button>
         <button @click="performOperation('/')">/</button>
         <button @click="calculate">=</button>
       </div>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         result: '',
         numbers: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
         operations: ['+', '-', '*', '/']
       };
     },
     methods: {
       handleClick(number) {
         this.result += number;
       },
       clearResult() {
         this.result = '';
       },
       performOperation(op) {
         if (this.result !== '') {
           this.$set(this, 'result', eval(this.result + op));
         }
       },
       calculate() {
         this.result = eval(this.result);
       }
     }
   }
   </script>

这里使用了Vue的v-model绑定输入框的值，并利用自定义事件处理函数来响应按钮点击。

5. **样式美化**：在 `src/assets/css` 中添加样式，让计算器更易用。

6. **主入口文件`main.js`** 中引入并注册组件，并将其作为根组件。

7. **启动应用**：在命令行运行 `npm run serve` 或者 `yarn serve` 启动本地服务器，在浏览器中查看结果。