Web-Dev-Beginner

Appearance

Homework ​

Homework：温度换算工具 ​

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

作业需求 ​

  1. 顶部操作区域

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

  2. 主体布局

    • 将主体分成左右两块：

      • 左侧：输入和操作区域

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

      • 右侧：换算结果

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

  3. 非法输入处理

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

布局示意图 ​

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

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

关键提示 ​

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

思考题 ​

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

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

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

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