1.下订单

element Form表单校验

• <el-form :model="orderInfo" label-width='150px' :rules="rules" ref="ruleForm" class="cart-box demo-ruleForm">
• <el-form-item label="收货人姓名:" prop="accept_name"></el-form>
• 参数:orderInfo{} 规则:rules{}

• radio 单选项 单选组 ;都可change事件监听

• 绑定数据

省市区联动

• 安装 v-distpicker -S
• 局部注册order.vue中 components
• template中使用

快递费用改变后,需重新计算

• 计算属性

下单完毕后需要做的事情

• 跳转支付组件 并且带上订单id
  
  • 创建payOrder.vue
  • 设置路由规则
  • 通过$route在payOrder.vue中拿到订单id
• 删除本地的购物车数据[已经下过单的],更新buycount
  
  • 把已下单的id组成一个新的数组
  • 遍历数组,删除本地对应的商品数据,同时更新buycount

2.生命周期

• 生命周期钩子是vue框架提供的
• 我们的生命周期钩子,只有在vue对象中,我们实现了它,它才会调用,代码中写了created(){}
• beforeCreate, created, beforemount, mounted, beforeDestory, destoryed只会调用一次

生命周期应用场景

• created:发起网络请求
• mounted:操作dom

• update:如果页面上显示,需要更新数据,把dom操作放在update中

• 收集用户偏好:beforeCreate进入时间,beforedestory离开时间

• 记录用户的偏移量:beforeCreate载入用户的偏移量 beforeDestory 记录用户的偏移量
• 记录用户填的表单: beforeCreate进入时读取本地储存的表单信息 beforeDestory离开网页时表单信息储存在本地

今日所安装的包

第一次安装:
    包:v-distpicker
    使用场景:省市区三级联动的时候用到它
    安装方式：cnpm i v-distpicker -S