vue2 -- 购物车小案例

1. 实现效果

2. 实现步骤

① 初始化项目基本结构

 

② 封装 MyHeader 组件

 

③ 基于 axios 请求商品列表数据（ GET 请求，地址为 https://www.escook.cn/api/cart ）

 

④ 封装 MyFooter 组件

 

⑤ 封装 MyGoods 组件

 

⑥ 封装 MyCounter 组件

 

3. 总结

① 能够知道 vue 中常用的生命周期函数

 创建阶段、运行阶段、销毁阶段

 created、mounted

② 能够知道如何实现组件之间的数据共享

 父 -> 子（自定义属性）

 子 -> 父（自定义事件）

 兄弟组件（EventBus）

③ 能够知道如何使用 ref 引用 DOM 元素或组件

 给元素或组件添加 ref="xxx" 的引用名称

 通过 this.$refs.xxx 获取元素或组件的实例