飞入购物车的动画
步骤:
1、创建一个p，里面放一个img，把它放在加入购物车的位置，并且隐藏
1.1 创建了p和img，写了必要的样式
1.2 让p刚开始的时候，显示到加入购物车这个位置，那么就必须获取加入购物车的offset
2、点击加入购物车，p显示出来，并且通过动画的方式移动到购物车的位置
2.1、在被动画元素上，包裹transition内置的组件
2.2、在transition上面注册动画进入阶段的动画钩子
2.3、在动画钩子里面设置开始位置，刷新动画帧，设置结束位置
2.4、点击了加入购物车按钮，需要显示被动画的元素，才能执行动画
3、当我们的p移动到购物车位置之后，隐藏
3.1，在afterEnter中把被动画的元素设置为隐藏
vuex 的使用
什么是vuex? 可理解为仓库,专门为vue.js开发的状态(数据)管理模式
跨组件通讯,多个组件都需要操作一个数据
使用: 1.安装; 2.导入,Vue.use();3.const store = new Vuex.Store()创建一个仓库对象; 4.注入到根实例,就有全局状态管理功能
核心概念:
state 仓库中的数据 buyCount:0
getter 仓库中获取数据 模板中{{this.$store.getters.getBuyCount}}
mutation 同步的方式操作数据的增删改
action 异步的方式操作数据的增删改
module 需要创建多个仓库时
购物车展示
1、拿着localStorage中的数据 {"90":5,"93":6}
2、遍历对象，把key（90，93）加入到临时数组中
3、调用临时数组的.join方法，组织好后台需要的参数
4、利用axios发送网络请求
5、数据回来之后，在渲染之前，给后台返回的buycount赋值
6、渲染
今日所安装的包
第一次安装:
包名:vuex
应用场景:在使用Vuex进行全局状态管理的时候
安装方式:cnpm i vuex --save
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论