用 Vue 3 创建电测听报告单 - 详细步骤及示例代码

当然可以！下面是一个简单的示例，演示了如何使用Vue 3来创建一个电测听报告单。\n\n首先，你需要安装Vue和Vue CLI。在命令行中运行以下命令：\n\n\nnpm install -g @vue/cli\n\n\n接下来，创建一个新的Vue项目。在命令行中运行以下命令：\n\n\nvue create eeg-report\n\n\n然后，选择默认配置，等待项目创建完成。\n\n进入项目目录，然后安装一些必要的依赖项：\n\n\ncd eeg-report\nnpm install axios\n\n\n接下来，打开src/App.vue文件，将其替换为以下内容：\n\nhtml\n<template>\n <div>\n <h1>电测听报告单</h1>\n <form @submit.prevent="submitForm">\n <label for="name">姓名：</label>\n <input type="text" id="name" v-model="name">\n <br>\n <label for="age">年龄：</label>\n <input type="number" id="age" v-model="age">\n <br>\n <label for="diagnosis">诊断：</label>\n <textarea id="diagnosis" v-model="diagnosis"></textarea>\n <br>\n <button type="submit">提交</button>\n </form>\n <div v-if="report">\n <h2>报告单：</h2>\n <p><strong>姓名：</strong>{{ report.name }}</p>\n <p><strong>年龄：</strong>{{ report.age }}</p>\n <p><strong>诊断：</strong>{{ report.diagnosis }}</p>\n </div>\n </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\nimport axios from 'axios';\n\nexport default {\n name: 'App',\n setup() {\n const name = ref('');\n const age = ref(0);\n const diagnosis = ref('');\n const report = ref(null);\n\n const submitForm = async () => {\n try {\n const response = await axios.post('https://example.com/submit-report', {\n name: name.value,\n age: age.value,\n diagnosis: diagnosis.value\n });\n report.value = response.data;\n } catch (error) {\n console.error(error);\n }\n };\n\n return {\n name,\n age,\n diagnosis,\n report,\n submitForm\n };\n }\n};\n</script>\n\n<style>\nform input, form textarea {\n margin-bottom: 10px;\n}\n</style>\n\n\n在上述代码中，我们创建了一个基本的表单，用户可以输入姓名、年龄和诊断。当用户点击提交按钮时，表单数据将通过POST请求发送到服务器（这里使用了一个虚拟的URL https://example.com/submit-report）。然后，服务器将返回报告单数据，我们将其显示在页面上。\n\n最后，你可以在命令行中运行以下命令启动开发服务器：\n\n\nnpm run serve\n\n\n然后，你可以在浏览器中打开http://localhost:8080，即可看到电测听报告单的表单页面。\n\n请注意，这只是一个基本的示例，你可以根据自己的需求进行修改和扩展。希望对你有所帮助！