前端程序员Vue开发经验总结

1：ssd项目大屏和管理系统总结

echarts基础样式：

管理系统增删改查：

2：ms协同平台总结

流程开发：

element组件操作：

tabs标签：

   // 获得标签数组async getTabarr() {let date = this.datelet id = this.diamondBlockIdconst params = {date: date,diamondBlockId: id}const resFormObj = await DiamondBlockinfo(params)//获取当前菱形块编号下表单数据const resTableArr = await BlastHoleStatusInfo(id)//获取当前菱形块编号下表格数据const dataObj = resFormObj.dataconst dataArr = resTableArr.datalet nameArr = this.editableTabs.map(item => item.name)if (nameArr.includes(id)) {this.editableTabsValue = id} else {this.editableTabs.push({title: id + '日爆破确认',name: id,InfoForm: dataObj,showArr: this.changeList(dataArr),BlastholeData: dataArr})this.editableTabsValue = id}console.log('tabs数组', this.editableTabs);},// 移除标签removeTab(targetName) {let tabs = this.editableTabslet activeName = this.editableTabsValueif (activeName === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {let nextTab = tabs[index + 1] || tabs[index - 1]if (nextTab) {activeName = nextTab.name}}})}this.editableTabsValue = activeNamethis.editableTabs = tabs.filter((tab) => tab.name !== targetName)},

后端的数组重新生成新的数组两种方法：

1：foreach 可以生成一个自定义的数组对象

                const newlist = this.twolistthis.list.forEach(item => {const data = {name_age: item.name + item.age}newlist.push(data)})

可以拿到一个自定义的newlist数组对象

2：map 操作原有的数组生成新数组字符串

 this.twolist = this.list.map(item => item.name + item.age)

更深一点的是拿着返回的数组对象进行数组加字符串的操作：例如下面的函数方法：

changeList(list) {return list.map((hole) => {const item = Object.assign({}, hole)item.holeId = item.holeId.split("_")[1]if (item.holeNumber < 10) {item.holeNumber = "0" + item.holeNumber}return item})},

操作数组里面对象的值进行字符串的加工，不想更改原数组数据要浅拷贝一层。

父子组件总结：

1：父子组件不涉及相互业务的，只需父组件把查询条件传参到子组件即可，子组件进行接口查询

2：父组件传一个控制子组件的变量参数，实现控制子组件(例如v-for显示或者disable控制是否允许输入)

3：子组件v-for循环，如果循环的每个组件里面的属性不一样，需要在父组件里提前处理后端返回的数据，不应该直接拿后端返回的数据进行循环。思维：有时候后端返回的数据不好操作时，记得先处理一下数据，在渲染

接口返回的res比较杂乱，定义一个数组，拼凑成想要的数组集，再传给子组件循环$http.getSbfData().then((res: any) => {const data = res.datathis.waterPumpCardBoxData = [{name: '新立-600',xl600CbMonth: data.xl600CbMonth,xl600PowerDay: data.xl600PowerDay,xl600PowerMonth: data.xl600PowerMonth,xl600PriceDay: data.xl600PriceDay,xl600PriceMonth: data.xl600PriceMonth,xl600PslDay: data.xl600PslDay,xl600PslMonth: data.xl600PslMonth,},{name: '西山-1140',xl600CbMonth: data.xs1140CbMonth,xl600PowerDay: data.xs1140PowerDay,xl600PowerMonth: data.xs1140PowerMonth,xl600PriceDay: data.xs1140PriceDay,xl600PriceMonth: data.xs1140PriceMonth,xl600PslDay: data.xs1140PslDay,xl600PslMonth: data.xs1140PslMonth,},{name: '西山-435',xl600CbMonth: data.xs435CbMonth,xl600PowerDay: data.xs435PowerDay,xl600PowerMonth: data.xs435PowerMonth,xl600PriceDay: data.xs435PriceDay,xl600PriceMonth: data.xs435PriceMonth,xl600PslDay: data.xs435PslDay,xl600PslMonth: data.xs435PslMonth,},]

前端程序员Vue开发经验总结相关推荐

前端程序员需要了解的Vue知识
前言:这一篇旨在教大家快速入门Vue2,每个知识点用案例解释不过学习vue2之前,建议学好JavaScript的基础知识: 前端程序员需要了解的JavaScript_成为前端大牛的博客-CSDN博客 ...
Web前端程序员该如何准备面试？这些面试知识应该掌握
面试其实是实力和运气并存的事情,所以一方面我们要做好知识的准备,另一方面也要抓住时机,该出手就出手,那么Web前端程序员该如何准备面试呢?下面和一起来看看吧! 一:Web前端面试什么? 针对Web前端 ...
web前端程序员职位介绍
web前端程序员职位介绍: 1.1年以上React实际项目开发经验. 2.熟悉webpack配置. 3.熟悉ES6语法. 4.熟悉TypeScript编程语言. 5.熟悉antd ui框架. 计算机相 ...
一个合格的web前端程序员要学会哪些技能？
想要成为一名合格的web前端程序猿,要学习的东西有很多,那么web前端要学会哪些技能呢?来看看下面的详细介绍就知道了. 一个合格的web前端程序员要学会哪些技能?想从事web前端开发,只会HTML.C ...
年薪30W前端程序员，需要吃透的前端书籍推荐
随着互联网时代的发展,web进入2.0时代,前端开发的岗位逐渐独立出来,大量的前端程序员工资和技术水平飙升.前端框架层出不穷,新技术不断更新,作为前端的程序员也是倍感吃力.但为了高薪,每一个前端开发者 ...
推荐一个Web前端程序员必须要吃透的书籍！
随着互联网时代的发展,Web进入2.0时代,前端开发的岗位逐渐独立出来,大量的前端程序员工资和技术水平飙升.前端框架层出不穷,新技术不断更新,作为前端的程序员也是倍感吃力.但为了高薪,每一个前端开发者 ...
初中级前端程序员面试中小型公司会问哪些问题?
初中级前端程序员面试中小型公司会问哪些问题?不同的公司面试内容也不尽相同,有的面试过程很轻松,有的面试官是个架构师level 挺高不会问八股文,给出了几个现实中的场景,然后转换成代码的逻辑去让实现. ...
前端程序员和后端程序员有什么不同？我来告诉你薪资待遇差多少
作为一个程序员,我发现后端程序员和前端程序员有很大的不同.后端程序员主要关注的是处理看不见的部分,如服务器.数据库.API等等.而前端程序员主要关注的是展现的部分,如网页的设计.交互和用户体验等等. ...
前端已死？我看未必，但「低代码」已剑指前端程序员
本文笔者会从以下几个方面分享,希望能够帮助正在迷茫的前端小伙伴提供一点思路! 逛技术博客不局限框架全栈工程师兴起关注前沿写技术文章录制前端视频总结 2023第一季度快过去了,没工作的找到工 ...

前端程序员Vue开发经验总结

前端程序员Vue开发经验总结相关推荐

最新文章

热门文章