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