河南大学web开发技术（vue）实验报告二

注意：本文包括之后所有用的Vue版本皆为Vue3，读者可通过命令：vue -V  自测版本！

实验的准备阶段 (指导教师填写)	课程名称	Web开发技术
	实验名称	比较数字大小与简单计算器（04500022002）
	实验目的	掌握Vue实例的创建 掌握如何在Vue中进行数据绑定 掌握Vue的事件监听操作 掌握Vue组件的定义和注册的方法 掌握Vue组件之间的数据传递的方法
	实验内容	实现一个比较两个数字大小的页面，练习Vue实例的创建、数据绑定和事件监听方法； 实现一个简单的页面计算器，练习组件的定义和注册方法，以及组件之间的数据传递
	实验类型 （打R）	□验证性    □演示性     □设计性      R综合性
	实验的重点、难点	组件的定义和注册 组件间的数据传递
	实验环境	VSCode编辑器 Chrome浏览器
实验的实施阶段	实验步骤及实验结果	在目录中通过Vue create 新建项目 Yarn serve 进行初始化 结束运行，修改src目录下的app.vue文件如以下代码：<template>   <div>     <ul>       <li><label for="num1">第一个数：</label><input type="number" v-model="num1" ></li>       <li><label for="num2">第二个数：</label><input type="number" v-model="num2"></li>       <li><button @click="compare">比较</button></li>       <li><p>结果是：{{ message }}</p></li>     </ul>   </div> </template> <script> export default {   data() {     return {       num1: 0,       num2: 0,       message: ''     }   },   methods: {     compare() {       if (this.num1 > this.num2) {         this.message = 'num1 is bigger';       } else if (this.num1 < this.num2) {         this.message = 'num2 is bigger';       } else {         this.message = 'Both numbers are equal';       }     }   } } </script> 对于第二题：修改app中的内容如下，核心是修改method中的方法即可，此处对实验报告中的样例进行了改进，成为一个筛选框以节省页面空间<template>   <div>     <ul>       <li><label for="num1">第一个数：</label><input type="number" v-model.number="num1"></li>       <li><label for="num2">第二个数：</label><input type="number" v-model.number="num2"></li>       <li><label for="operator">请选择运算符：</label><select v-model="operator">         <option>+</option>         <option>-</option>         <option>*</option>         <option>/</option>       </select></li>       <li><button @click="calculate">运算</button></li>       <li><p>结果是：{{ result }}</p></li>     </ul>   </div> </template> <script> export default {   data() {     return {       num1: 0,       num2: 0,       operator: '+',       result: 0     }   },   methods: {     calculate() {       switch(this.operator) {         case '+':           this.result = this.num1 + this.num2;           break;         case '-':           this.result = this.num1 - this.num2;           break;         case '*':           this.result = this.num1 * this.num2;           break;         case '/':           this.result = this.num1 / this.num2;           break;         default:           this.result = 'Invalid operation';       }     }   } } </script>
实验结果的处理阶段	实验结果的分析与总结	本次实验我先完成了一个比大小的网页，复习了过去在html中的知识，即无序列表。通过在export中写入简单得method函数返回结果。然后我又编写了一个简易的计算器网页，并通过select标签进行改进，编写的方法很简单就是常规的switch来选择operator。总结就是复习了一些编程的基本功以及了解vue是如何使用函数的。