vue+bootstrap购物车拖拽案例（捋思路）

1. bootstrap 导航
   

2. bootstrap 栅格系统 分为12列 一列排3个 一整行排4个

3. 循序products 并记录索引 v-for="(product,index) in products" 要循环谁 就写在谁身上

4. 面板 面板颜色 居中 允许拖拽

5. 绑定拖拽事件 方法名为start($event,index,product)将事件对象 索引 和 拖谁记录下来

6. 面板头—> 动态绑定商品名称

7. 因为图片是动态的所以要加 :src 给图片固定宽高

8. 用循环遍历出来的product.productPrice 绑定价格
   

9. 添加 .table-bordered 类为表格和其中的每个单元格增加边框

10. | 管道符 toFixed(2)保留几位小数点
    

11. 购物车 绑定事件 @drop=“drop”

12. 如果想用 @drop 就必须阻止 @dragover.prevent 的默认行为

13. bootstrap里自带的组件 Glyphicons 字体图标 前缀加字体图标名称即可

14. cart 购物车 显示数量 count是个方法 他在computed里计算出来 往购物车里扔了几个
    

15. watch 监控观察：值变了就做一些事情 支持异步 因为没有返回值

16. 什么时候使用watch：当数据变了 我就存到localStorage中

17. 为了防止 我一刷新 页面就会恢复初始状态 要用watch 监控 当值发生改变时 存入localStorage

18. deep:true 为深度监控 如果不写 watch默认的是只监控一层 （eg:对象 和 对象里）

19. filters 是过滤 toFixed为了保留小数 第一个参数默认 是 管道符 前面的项

20. 这个函数返回什么 就让管道符前面的项显示什么 实际上数不会变
    

21. 在页面加载时 用axios获取数据

22. 并将localStorage里面的内容 取出来 如果是null 数组为空

23. total 用reduce累求和 算出总价

24. count 也是计算出 一共往购物车里扔了几个
    

25. methods 里放的是方法

26. 获取json数据 如果成功的话会调用第一个 失败调用第二个 和Promise差不多

27. 设置拖拽图片 它有三个参数 当前图片元素（根据索引找到的）

28. ref 的作用：是给一个元素添加一个别名 可以用 this.$refs 拿到这个元素
    

29. 拖拽：判断如果当前数组里有正拖着的id 就说明 之前这本书被扔进去过 只累加它数量count

30. 否则：检测他之前是否在购物车出现 如果没有出现过

31. 将当前项 深度克隆 增加一个count属性（值为1） 记录类别

32. 如果{…this.item, count: 1}这个方法报错 需升级浏览器 60+以上才可以

33. {…this.item, count: 1} 仍然报错 使用 Object.assign方法
    
    
    （诶…不知道为啥之前用有道记笔记代码直截图不用代码块 现在也不能复个制啥的 闹挺）