网站建设部分费用会计科目,永康网站建设,wordpress主题修改底部版权,英文网站建设免费目录
前言
响应式基础 ref reactive
学习成果展示
Vue项目搭建
总结 前言 前面学习了前端HMTL、CSS样式、JavaScript以及Vue框架的简单适用#xff0c;接下来运用前面的基础继续学习Vue#xff0c;运用前端模块化编程的思想。 响应式基础 ref reactive
关于ref和react…目录
前言
响应式基础 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试用例管理平台/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv calsstable styledisplay: inline-blockh2测试用例/h2button classadd-case-button clickisEdittrue新增用例/buttontable border2col stylewidth: 100px; overflow: hidden; text-overflow: ellipsis /col stylewidth: 100px /col stylewidth: 100px /col stylewidth: 100px /col stylewidth: 100px /trth用例名/thth步骤名/thth关键字/thth参数1/thth参数2/thth操作/th/trtrtd参数正确登录成功/tdtd输入正确的参数登录成功/tdtd用户名 密码/tdtd用户名/tdtd密码/tdtdbutton删除/button/td/trtrtd参数错误登录失败/tdtd输入错误的参数登录失败/tdtd用户名 密码/tdtd用户名/tdtd密码/tdtdbutton删除/button/td/trtrtd参数为空登录失败/tdtd输入的参数为空登录失败/tdtd用户名 密码/tdtd用户名/tdtd密码/tdtdbutton删除/button/td/tr/col/table/div
/body/html 上面的实现方式用到了很多个th、td标签维护很麻烦那有没有更好的解决方法 如何用vue框架实现 用v-for遍历数组中的元素进行列表的渲染。 关键两行代码 取列表的表头表头名称前加上编号编号从1开始 th v-for(Name,key,index) in tableName :keykey{{index1}}{{Name}}/th 取列表里具体的内容 tr v-fortestCase in testCases 如果要修改表头、列表里内容不需要在标签里一个一个改只需要去维护tableName、testCases里的值即可。是不是很省劲 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试用例管理平台/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv idtestdiv calsstable styledisplay: inline-blockh2测试用例/h2table border2col stylewidth: 100px; overflow: hidden; text-overflow: ellipsis /col stylewidth: 100px /col stylewidth: 100px /col stylewidth: 100px /col stylewidth: 100px /theadtrth v-for(Name,key,index) in tableName :keykey{{index1}}{{Name}}/th/tr/theadtbodytr v-fortestCase in testCasestd{{testCase.caseName}}/tdtd{{testCase.stepName}}/tdtd{{testCase.keywords}}/tdtd{{testCase.param1}}/tdtd{{testCase.param2}}/tdtd{{testCase.opration}}/td/tr/tbody/table/div/divscriptconst { 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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试用例管理平台/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/head
header idtitle欢迎来到MRJJ_9的自动化测试平台
/header
bodydiv classlearn-websiteh3前端学习网站/h3a classbiglink hrefhttps://www.w3school.com.cn/html/index.aspw3school.com/a/bra hrefhttps://developer.mozilla.org/zh-CN/docs/Web/HTMLMDN 社区/a/bra classtest01 hrefhttps://www.csdn.netCSDN社区/a/brh3本人博客/h3a hrefhttps://blog.csdn.net/mrjj_9/category_12393537.html前端学习博客/a/divdiv idtestdiv classform styledisplay: inline-blockh2 idform-title添加测试用例/h2!-- button classclose-button clickisEditfalse关闭/button --label用例名input typetext placeholder输入测试用例名称 namecaseName v-modelnewCase.caseName/labellabel步骤名input typetext placeholder输入测试步骤名称 namestepName v-modelnewCase.stepName/labeldiv请选择用例类型labelinput typeradio nametype valueapi接口自动化/labellabelinput typeradio nametype valueuiUI自动化br/label/divlabel forkeywords关键字/labelselect namekeywords v-modelnewCase.keywordsoption valueopenBrowser打开浏览器/optionoption valueparams传入必传参数/option/select/brlable参数一input typetext nameparam1 v-modelnewCase.param1/lablelable参数二input typetext nameparam2 v-modelnewCase.param2/lable/brbutton idaddSubmit typebutton clickaddCase提交新增/button/form/divdiv calsstable styledisplay: inline-blockh2测试用例/h2table border2col stylewidth: 100px; overflow: hidden; text-overflow: ellipsis /col stylewidth: 100px /col stylewidth: 100px /col stylewidth: 100px /col stylewidth: 100px /theadtrth v-for(Name,key,index) in tableName :keykey{{index1}}{{Name}}/th/tr/theadtbodytr v-fortestCase in testCasestd{{testCase.caseName}}/tdtd{{testCase.stepName}}/tdtd{{testCase.keywords}}/tdtd{{testCase.param1}}/tdtd{{testCase.param2}}/tdtdbutton iddelete clickdeleteCase(testCase)删除/button/td/tr/tbody/table/div/divscriptconst { 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);/scriptlink relstylesheet hrefcase.cssstylebody {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 总结
