前端培训-中级阶段（43）- vue 2.x 实战 CURD

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前面我们基本学会了 Vue 的基本使用，那么今天我们来尝试实现一个库存管理系统，因为没有学服务端（放后面 express 里面做接口），我们暂时就不考虑服务端的实现了，直接存本地。

demo地址：https://www.lilnong.top/static/html/vue-erp-test.html。
demo地址，修改为 [email protected]，支持新的插槽语法：https://www.lilnong.top/static/html/[email protected]

需求

1. 部门管理
   
2. 人员管理，人员需要和部门关联。
   

3. 库存管理，需要关联人员
   

   1. 可以补货
   2. 可以被领用，需要有领用人和数量
4. 需要有操作记录
   

需求大概就是这样，下面说一下我们的实现方案：

• 因为没有服务端，所以数据存放在 localStroage 中。

• 基本上就是 table + dialog

  • table 负责展示数据
  • dialog 负责新增修改数据
• 初始化从 localStroage 读取数据，每次操作完保存 localStroage。

实现

table 列表

代码如下，我们来看一下里面都用到了那些东西

• v-if 用来判断当前应该显示那个标签的内容

  • 来个面试题 v-if 和 v-show 区别是什么？前端培训-中级阶段（35）- Vue 语法 之 Vue 自带的指令

• v-bind，缩写为 :

  • size="mini" 用来传入了一个字符串，其实等价于 :size="'mini'"

• v-on，缩写为 @

  • @click="insertGroup" 用来实现单击时触发函数。

• 插槽，用于父组件给子组件传递 DOM

  • 新增部门，el-button 是一个组件，内部接收到了一个 的内容。