购物车案例

1.项目初始化

vue create shopcar
npm add bootstrap
npm add less less-loader@5.0.0 -D

2.在components下创建 MyHeader组件 MyFooter组件 MyGoods组件 - 商品MyCount组件

然后引入到App.vue上注册 在main.js中引入bootStrap库

3.让MyHeader组件支持不同项目---自定义

背景色可以让使用组件的人自定义-----父传子 子组件props定义变量来接收

同理，文字颜色、文字内容也是如此

只要使用组件时 传入不同值就可以 这样便达到了组件复用的效果

props可以写数组的形式也可以写对象形式，后者可对类型进行校验

4.获取数据----axios调用接口

要和后台交互 依赖 axios 进行网络请求

npm add axios

 MyGoods组件只是一个item 因此不能在该组件里请求所有商品的数据,而在App中的created发起请求然后传进来 循环使用该组件即可 

  created(){
    //不必在自己引入axios变量 而是直接使用全局属性
    //返回promise对象 .then获取结果
    this.$axios({
      url: "/api/cart"
    }).then(res =>{
      console.log(res)
    })
  }
}

 5.数据渲染

 定义list: [] //存放所有商品的数据

用的是箭头函数 this可以指向外面作用域的变量

this.list = res.data.list

<MyGoods v-for="obj in list" :key="obj.id" :gobj="obj"></MyGoods>

父传子 props：{

gobj : Object

}

用gobj.goods_state关联当前商品的选中状态

 小结：1、数据在data中保存 2、页面v-for循环 MyGoods组件 3、分别传入obj数据对象(一对一关系) 4、内部使用数据对象值渲染到标签上

6.商品选中

点击复选框完成选中效果 

点击商品图片完成复选框的选中效果

点Label标签相当点到form表单标签 前提 Label的for属性的值要和表单id属性的值匹配上

7.数量控制---点击或输入改变商品的数量

1. 外部传入数据对象
2. v-model关联对象的goods_count属性和输入框 (双向绑定)
3. 商品按钮 +和-, 商品数量最少1件
4. 侦听数量改变, 小于1, 直接强制覆盖1

8.全选

拆分需求：点击全选影响所有小选 点击小选影响全选

如何拿到全选的状态---用v-model+计算属性 关联全选框 在set方法里获取全选状态

把全选的状态（就是set）同步给所有小选框的选中状态上

涉及到子(Myfooter)传父（App）

当点击小选框时 还要统计来确定复选框的选中状态

因为全选框的值是由计算属性来确定的 

如何给全选框返回一个值呢 让它影响页面的状态 执行get方法

return小选框的状态 当前页面没有小选框的状态 在app list ----->父传子

 <MyFooter @changeAll="allFn" :arr="list"></MyFooter>

然后子组件接收：props:{arr:Array}

这样就可以使用每个小选框关联的对象

可以用every来查找数组里有没有不符合条件（找没有勾选的）

只要有人没有勾选就原地返回false

于是就把false赋给全选框 isAll=false

  return this.arr.every(obj => obj.goods_state === true)

9.总数量

10.总价