前端基础（Vue的模块化开发）
目录
前言
响应式基础 ref reactive
学习成果展示
Vue项目搭建
总结
前言
前面学习了前端HMTL、CSS样式、JavaScript以及Vue框架的简单适用，接下来运用前面的基础继续学习Vue，运用前端模块化编程的思想。
响应式基础 ref reactive
关于ref和reactive，官方解释如下，另外一篇博客写得也很清楚
响应式基础 | Vue.js (vuejs.org)
谈谈Vue3中的ref和reactive_vue reactive_七公子77的博客-CSDN博客
学习成果展示
不用vue框架写一个table
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试用例管理平台</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div calss="table" style="display: inline-block"><h2>测试用例</h2><button class="add-case-button" @click="isEdit=true">新增用例</button><table border="2"><col style="width: 100px; overflow: hidden; text-overflow: ellipsis" /><col style="width: 100px" /><col style="width: 100px" /><col style="width: 100px" /><col style="width: 100px" /><tr><th>用例名</th><th>步骤名</th><th>关键字</th><th>参数1</th><th>参数2</th><th>操作</th></tr><tr><td>参数正确登录成功</td><td>输入正确的参数登录成功</td><td>用户名 密码</td><td>用户名</td><td>密码</td><td><button>删除</button></td></tr><tr><td>参数错误登录失败</td><td>输入错误的参数登录失败</td><td>用户名 密码</td><td>用户名</td><td>密码</td><td><button>删除</button></td></tr><tr><td>参数为空登录失败</td><td>输入的参数为空登录失败</td><td>用户名 密码</td><td>用户名</td><td>密码</td><td><button>删除</button></td></tr></col></table></div>
</body></html>
上面的实现方式用到了很多个th、td标签，维护很麻烦，那有没有更好的解决方法？
如何用vue框架实现？
用v-for，遍历数组中的元素，进行列表的渲染。
关键两行代码：
取列表的表头，表头名称前加上编号，编号从1开始
<th v-for="(Name,key,index) in tableName " :key="key">{{index+1}}{{Name}}</th>
取列表里具体的内容
<tr v-for="testCase in testCases" >
如果要修改表头、列表里内容，不需要在标签里一个一个改，只需要去维护tableName、testCases里的值即可。是不是很省劲！
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试用例管理平台</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="test"><div calss="table" style="display: inline-block"><h2>测试用例</h2><table border="2"><col style="width: 100px; overflow: hidden; text-overflow: ellipsis" /><col style="width: 100px" /><col style="width: 100px" /><col style="width: 100px" /><col style="width: 100px" /><thead><tr><th v-for="(Name,key,index) in tableName " :key="key">{{index+1}}{{Name}}</th></tr></thead><tbody><tr v-for="testCase in testCases"><td>{{testCase.caseName}}</td><td>{{testCase.stepName}}</td><td>{{testCase.keywords}}</td><td>{{testCase.param1}}</td><td>{{testCase.param2}}</td><td>{{testCase.opration}}</td></tr></tbody></table></div></div><script>const { createApp, computed, ref, reactive } = Vue;const = MRJJ{setup() {let tableName = reactive({"caseName": "用例名","stepName": "步骤名","keywords": "关键字","param1": "参数一","param2": "参数二","opration": "操作",})let testCases = ref([{"id": 1,"caseName": "参数正确登录成功","stepName": "登录成功","keywords": "用户名","param1": "用户名","param2": "密码","opration": "删除"},{"id": 2,"caseName": "参数错误登录失败","stepName": "登录失败","keywords": "用户名","param1": "用户名","param2": "密码","opration": "删除"},{"id": 3,"caseName": "参数为空登录失败","stepName": "登录成功","keywords": "用户名","param1": "用户名","param2": "密码","opration": "删除"},])return { tableName, testCases }}};createApp(MRJJ).mount('#test');</script>
</body></html>可以看到td标签里的内容自动取出来了。
踩坑记录：
createApp(MRJJ).mount('#test');
id为test这个div标签里的内容，才能引用MRJJ里面的方法。
结合前面的内容，最终写出来的页面！
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试用例管理平台</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<header id="title">欢迎来到MRJJ_9的自动化测试平台
</header>
<body><div class="learn-website"><h3>前端学习网站</h3><a class="biglink" href="https://www.w3school.com.cn/html/index.asp">w3school.com</a></br><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">MDN 社区</a></br><a class="test01" href="https://www.csdn.net">CSDN社区</a></br><h3>本人博客</h3><a href="https://blog.csdn.net/mrjj_9/category_12393537.html">前端学习博客</a></div><div id="test"><div class="form" style="display: inline-block"><h2 id="form-title">添加测试用例</h2><!-- <button class="close-button" @click="isEdit=false">关闭</button> --><label>用例名：<input type="text" placeholder="输入测试用例名称" name="caseName" v-model="newCase.caseName"></label><label>步骤名：<input type="text" placeholder="输入测试步骤名称" name="stepName" v-model="newCase.stepName"></label><div>请选择用例类型：<label><input type="radio" name="type" value="api">接口自动化</label><label><input type="radio" name="type" value="ui">UI自动化<br></label></div><label for="keywords">关键字：</label><select name="keywords" v-model="newCase.keywords"><option value="openBrowser">打开浏览器</option><option value="params">传入必传参数</option></select></br><lable>参数一：<input type="text" name="param1" v-model="newCase.param1"></lable><lable>参数二：<input type="text" name="param2" v-model="newCase.param2"></lable></br><button id="addSubmit" type="button" @click="addCase">提交新增</button></form></div><div calss="table" style="display: inline-block"><h2>测试用例</h2><table border="2"><col style="width: 100px; overflow: hidden; text-overflow: ellipsis" /><col style="width: 100px" /><col style="width: 100px" /><col style="width: 100px" /><col style="width: 100px" /><thead><tr><th v-for="(Name,key,index) in tableName " :key="key">{{index+1}}{{Name}}</th></tr></thead><tbody><tr v-for="testCase in testCases"><td>{{testCase.caseName}}</td><td>{{testCase.stepName}}</td><td>{{testCase.keywords}}</td><td>{{testCase.param1}}</td><td>{{testCase.param2}}</td><td><button id="delete" @click="deleteCase(testCase)">删除</button></td></tr></tbody></table></div></div><script>const { createApp, computed, ref, reactive } = Vue;const MRJJ = {setup() {let tableName = reactive({"caseName": "用例名","stepName": "步骤名","keywords": "关键字","param1": "参数一","param2": "参数二","opration": "操作",})let testCases = ref([{"id": 1,"caseName": "参数正确登录成功","stepName": "登录成功","keywords": "用户名","param1": "用户名","param2": "密码","opration": "删除"},{"id": 2,"caseName": "参数错误登录失败","stepName": "登录失败","keywords": "用户名","param1": "用户名","param2": "密码","opration": "删除"},{"id": 3,"caseName": "参数为空登录失败","stepName": "登录成功","keywords": "用户名","param1": "用户名","param2": "密码","opration": "删除"},])let newCase = reactive({"caseName": "用例名","stepName": "步骤名","keywords": "关键字","param1": "参数一","param2": "参数二",})let isCaseName = ref(true);function deleteCase(testCase) {console.log("要删除的用例是：", testCase)testCases.value.splice(testCases.value.indexOf(testCase), 1);}function addCase() {let lastId = testCases.value[testCases.value.length - 1].id;console.log(lastId);let addCase = { ...newCase };addCase.id = lastId + 1;testCases.value.push(addCase);isEdit.value = false;}return { tableName, testCases, newCase, addCase, deleteCase}}};createApp(MRJJ).mount('#test');</script><link rel="stylesheet" href="case.css"><style>body {background: aliceblue;background-image: url("./picture.jpg");background-size: 60vw;background-position: 10% 10%;}</style>
</body>
</html>
Vue项目搭建
npm init vue
创建的项目结构， 在本地将项目启动起来，进入工程目录，打开终端，输入命令：npm run dev
本地启动完成的项目
vue插件安装必备，推荐看下面的这篇博客
开发vue3必备的几个vscode插件，你用上了吗？-腾讯云开发者社区-腾讯云 (tencent.com)
vs code切换主题，File->preferences-Theme
总结
相关文章：
前端基础（Vue的模块化开发）
目录 前言 响应式基础 ref reactive 学习成果展示 Vue项目搭建 总结 前言 前面学习了前端HMTL、CSS样式、JavaScript以及Vue框架的简单适用，接下来运用前面的基础继续学习Vue，运用前端模块化编程的思想。 响应式基础 ref reactive 关于ref和react…...
SystemVerilog interface使用说明
1. Interface概念 System Verilog中引入了接口定义，接口与module 等价的定义，是要在其他的接口、module中直接定义，不能写在块语句中，跟class是不同的。接口是将一组线捆绑起来，可以将接口传递给module。 2. 接口的优…...
机器人制作开源方案 | 送餐机器人
作者：赖志彩、曹柳洲、王恩开、李雪儿、杨玉凯 单位：华北科技学院 指导老师：张伟杰、罗建国 一、作品简介 1. 场景调研 1.1项目目的 近年来，全国多地疫情频发，且其传染性极高，食品接触是传播途径之一。…...
Gradio部署应用到服务器不能正常访问
用Gradio部署一个基于ChatGLM-6B的应用，发布到团队的服务器上（局域网，公网不能访问），我将gradio应用发布到服务器的9001端口 import gradio as gr with gr.Blocks() as demo:......demo.queue().launch(server_port90…...
数据暴涨时代，该如何数据治理？_光点科技
随着信息技术的迅猛发展，数据已经成为现代社会的核心资源。在这个被称为"数据暴涨时代"的时代里，大量的数据源源不断地被产生和积累，但如何有效地管理、分析和利用这些数据成为了一个迫切需要解决的问题。数据治理，作为…...
2021年03月 C/C++（三级）真题解析#中国电子学会#全国青少年软件编程等级考试
第1题：找和为K的两个元素 在一个长度为n(n < 1000)的整数序列中，判断是否存在某两个元素之和为k。 时间限制：1000 内存限制：65536 输入 第一行输入序列的长度n和k，用空格分开。 第二行输入序列中的n个整数ÿ…...
GPT-5出世？OpenAI GPT-5商标已注册
OpenAI的GPT已经成为了业界标杆，升级速度之快让人瞠目，别人追GPT-3.5的时候GPT-4横空出世，差距被拉开了，现在GPT-5就要来了。 据商标律师泄露的消息，OpenAI已于7月18日注册了GPT-5商标。虽然注册商标并不罕见…...
优雅的使用 Dockerfile 定制镜像
一、使用 Dockerfile 定制镜像 1.1、Dockerfile 定制镜像 镜像的定制实际上就是定制每一层所添加的配置、文件。如果我们可以把每一层修改、安装、构建、操作的命令都写入一个脚本，用这个脚本来构建、定制镜像，无法重复的问题、镜像构建透明性的问题、…...
limit的用法mysql
当你在 MySQL 数据库中使用 LIMIT 语句，它可以用于限制查询结果的行数。这在分页查询或者限制返回的数据量时非常有用。下面是一些示例： 返回前几行数据： SELECT * FROM Customers LIMIT 5;这将返回 Customers 表中的前 5 行数据。 分页查…...
clickhouse Checksum doesn‘t match: 问题修复
1. 问题描述 SQL 错误 [40] [07000]: Code: 40. DB::Exception: Checksum doesnt match: corrupted data. Reference: 50e8c1efa78de2881b725d44b04be1fe. Actual: 161c99eb681ec36b83540ecdd65ad8c9. Size of compressed block: 32846. The mismatch is caused by single bit…...
企业如何开展个人信息安全影响评估（PIA）二
基本概念 根据《信息安全 技术个人信息安全影响评估指南》（GB/T 39335—2020；personal information security impact assessment，简称“PIA”），个人信息安全影响评估是指针对个人信息处理活动，检验其合法合…...
android TextView 超出长度使用省略号
在Android中最常见的需求，就是在在外部展示信息时，需要简要展示内容。TextView仅需在静态布局文件中设置以下几个属性： android:maxWidth“100dp” // 宽度是多少才算超出 android:maxLines"2" // 高度多少才算超出 android:elli…...
c++ | 字节转换 | 字长 | 机器位数
为什么有的时候脑子转不过来？？ 为什么要对字节、机器长啊、位啊都要门清 位数 一般的就是指计算机的位数，比如64位/32位，更简单的理解，计算机就是在不停的做二进制的计算，比如32位计算机，在长…...
7-4 交换最小值和最大值
分数 15 全屏浏览题目 切换布局 作者 C课程组 单位 浙江大学 本题要求编写程序，先将输入的一系列整数中的最小值与第一个数交换，然后将最大值与最后一个数交换，最后输出交换后的序列。 注意：题目保证最大和最小值都是唯一的。…...
解决Pycharm的Settings中Project不见了也无法选择Python Interpreter的方法
目录 一、问题如下二、解决方法 一、问题如下 突然打开项目没有python解释器，也无法重新配置python Interpreter，而且整个文件夹是黄色高亮的形式，如下显示，而且重新安装了pycharm也没用甚至说打开File–>Setting–>Projec…...
AWS EKS 集群自动扩容 Cluster Autoscaler
文章目录 一，需求工作需求说明 二，部署精简命令执行1，要求2，查看EC2 Auto Scaling groups Tag3，创建Serviceaccount需要的Policy，Role4，部署Cluster Autoscaler5，验证6，常…...
excel中有哪些通配符、excel配置问题，数学函数篇1之sum系列
学习excel前需要明确的是事： 在学习excel函数之前，大家需要明确一件事，excel现在设计到了一些新函数，这些新函数只能存在于office365、office2019及更 新版本之中，所以建议大家在学习时安装较新的版本，…...
工控行业需要熟悉的工业级通信协议
1. Modbus RTU Modbus RTU 是一种串行通信协议，常用于工控行业。它具有以下特点和优势： 采用二进制编码，数据传输更加高效。支持多种传输介质，如RS-232、RS-485等。容易实现和使用，适用于各种设备。具备强大的错误检…...
力扣题解（1030. 距离顺序排列矩阵单元格），带注释
题目描述 链接:点我 注意：多看几遍题目，开始没看懂…相当于计算矩阵网格里面的点（不要计算边界） 我开了题解才明白题的意思 orz… 题解 class Solution {public int[][] allCellsDistOrder(int rows, int cols, int rCenter, …...
每天一道leetcode：剑指 Offer 34. 二叉树中和为某一值的路径（中等图论深度优先遍历递归）
今日份题目： 给你二叉树的根节点 root 和一个整数目标和 targetSum ，找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例1 输入：root [5,4,8,11,null,13,4,7,2,null,null,5,1], targetSu…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
)
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
SQL进阶之旅 Day 22：批处理与游标优化
【SQL进阶之旅 Day 22】批处理与游标优化 文章简述（300字左右） 在数据库开发中，面对大量数据的处理任务时，单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”，深入探讨如何通过批量操作和游标技术提…...
ffmpeg（三）：处理原始数据命令
FFmpeg 可以直接处理原始音频和视频数据（Raw PCM、YUV 等），常见场景包括： 将原始 YUV 图像编码为 H.264 视频将 PCM 音频编码为 AAC 或 MP3对原始音视频数据进行封装（如封装为 MP4、TS） 处理原始 YUV 视频…...
IP选择注意事项
IP选择注意事项 MTP、FTP、EFUSE、EMEMORY选择时，需要考虑以下参数，然后确定后选择IP。 容量工作电压范围温度范围擦除、烧写速度/耗时读取所有bit的时间待机功耗擦写、烧写功耗面积所需要的mask layer...
TMC2226超静音步进电机驱动控制模块
目前已经使用TMC2226量产超过20K，发现在静音方面做的还是很不错。 一、TMC2226管脚定义说明 二、原理图及下载地址 一、TMC2226管脚定义说明 引脚编号类型功能OB11电机线圈 B 输出 1BRB2线圈 B 的检测电阻连接端。将检测电阻靠近该引脚连接到地。使用内部检测电阻时，将此引…...