Homework

Homework：温度换算工具

本次作业的目标是使用 Vue.js 创建一个温度换算工具，帮助学生进一步熟悉 Vue 组件的数据绑定、事件处理和表单操作。本工具包含一个输入区域、一个换算选项和一个显示换算结果的区域。

---

作业需求

1. 顶部操作区域

   • 在页面的顶部，添加一个横贯左右的操作区域。
   • 包含一个标题（例如 “温度换算工具”）和一个 “清空” 按钮。
   • 点击 “清空” 按钮时，所有输入和换算结果清空。

2. 主体布局

   • 将主体分成左右两块：

     • 左侧：输入和操作区域

       • 输入当前温度的数值。
       • 下拉选择当前温度的单位，选项包括 “摄氏度”、“华氏度” 和 “开尔文”。
       • 单选按钮（Radio）选择要换算的目标单位（摄氏度、华氏度、开尔文）。
       • “换算” 按钮，点击后执行换算并显示结果。

     • 右侧：换算结果

       • 显示换算后的温度结果。

3. 非法输入处理

   • 学生需处理非法输入的情况，例如非数字、空输入、负值（如果目标单位不支持负值）。

---

布局示意图

以下是作业页面的简易布局示意图：

+------------------------------------------------------+
|             温度换算工具                [清空按钮]    |
+------------------------------------------------------+
|                       主体区域                       |
| +---------------------------+  +-------------------+ |
| |                           |  |                   | |
| | 当前温度： [       ]       |  | 换算结果：       | |
| | 当前单位： [下拉选择]      |  |                   | |
| |                           |  |                   | |
| | 目标单位：                |  |                   | |
| |   ( ) 摄氏度              |  |                   | |
| |   ( ) 华氏度              |  |                   | |
| |   ( ) 开尔文              |  |                   | |
| |                           |  |                   | |
| |           [换算按钮]      |  |                   | |
| +---------------------------+  +-------------------+ |

---

关键提示

• 使用 v-model ​ 绑定输入和选择的值，这样可以简化表单的值获取和更新。
• 使用 条件渲染（例如 v-if ​）来控制当输入不合法时，是否显示提示信息。
• 为了让应用在每次清空后都恢复默认状态，确保点击 “清空” 按钮时重置所有相关数据。
• 非法输入处理：在用户输入非法数据时（例如非数字或空值），需要显示提示或不执行换算。

---

思考题

1. 思考题 1：使用 Vue 来操作，与之前直接用 JavaScript 操作 DOM 的方式相比，有哪些优点？谈谈你的体会。

   • 提示：思考 Vue 的数据绑定、状态管理、响应式系统的优势。Vue 如何简化了数据更新和页面渲染？

2. 思考题 2：如果希望换算结果在用户输入的同时实时更新，可以怎么做？

   • 提示：想一想 Vue 提供的 双向数据绑定 如何实现这一需求？