前端实训-中级阶段(43)-vue2.x实战CURD
时间：2023-04-05 17:42:41
HTML5
最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。之前我们已经基本学会了vue的基本使用，所以今天我们来尝试实现一个库存管理系统，因为我们还没有学过server（以后放在express中作为接口），就不考虑实现了服务器，直接存储在本地。演示地址：https://www.lilnong.top/static/html/vue-erp-test.html。Demo地址，修改为vue@2.6.11，支持新的slot语法：https://www.lilnong.top/static/html/vue-erp-test-vue@2.6.11.html需要部门经理管理，人员需要与部门相关联。库存管理需要相关人员。可以补充，可以使用。需要有人员和数量，需要有操作记录。要求大概是这样的。说说我们的实现方案：因为没有服务器，所以数据都存储在localStroage中。基本上table+dialogtable负责显示数据，dialog负责添加和修改数据，从localStroage初始化和读取数据，每次操作后保存localStroage。实现表列表的代码如下。我们来看看它里面用到了什么。v-if用于判断应该显示的标签内容。让我们问一个面试问题。v-if和v-show有什么区别？前端训练-中级（35）-Vue自带命令v-bind的Vue语法，简写为：size="mini"用于传入一个字符串，其实等价于：size="'mini'"v-on，缩写为@@click="insertGroup"，用于点击时触发一个函数。该插槽用于父组件将DOMnewdepartment传递给子组件。el-button是一个在内部接收内容的组件。这里是一个作用域插槽，DOM使用父级的，而作用域使用子级的。当然slot-scope被舍弃了，应该使用2.6.0新增的v-slot部门管理
添加新部门 修改部门信息 对话框代码如下，我们来看看里面用到了什么。首先，我们把一个dialog的状态集成到一个memberInfo变量中，这样其实方便我们开发。如果有多个对话场景，我们很容易区分范围。.sync（vue2.3.0+新增）可以理解为组件间双向数据绑定的扩展。以前只能使用v-model（:value和@input）来实现。:visible.sync="memberInfo.dialogVisible"子组件可以通过this.$emit('update:visible',newVisible)修改父组件的memberInfo.dialogVisible的值。slot命名为slot
，当然slot被废弃了，应该使用2.6.0中添加的v-slot取消确定初始化数据&运行后保存数据。初始化创建的数据时，从localStorage读取数据。由于Storage只能保存字符串，所以还需要JSON.parse。created(){this.list1=JSON.parse(localStorage.getItem('list1'))||[]this.list2=JSON.parse(localStorage.getItem('list2'))||[]this.list3=JSON.parse(localStorage.getItem('list3'))||[]this.list4=JSON.parse(localStorage.getItem('list4'))||[]},操作&保存数据groupInfoHandler(type){//0取消1确认console.log('groupInfoHandler',arguments)if(!type){}else{if(this.groupInfo.id){varitem=this.groupHash[this.groupInfo.id];this.saveLog(2,`更新部：${item.name}=>${this.groupInfo.name}`)item.name=this.groupInfo.name}else{if(this.groupInfo.name.trim().length==''){returnthis.$message.error("请输入名称")}this.list1.push({id:(this.list1.length+1),name:this.groupInfo.name})this.saveLog(2,`新增部门：${this.groupInfo.name}`)}localStorage.setItem('list1',JSON.stringify(this.list1))}this.groupInfo.dialogVisible=false;},微信公众号：前端立农参考前端培训目录，前端培训规划，前端培训计划
