vuejs仿美团,饿了么项目之——商品数量加减篇

JavaScript016

vuejs仿美团,饿了么项目之——商品数量加减篇,第1张

首先,新增个商品数量的加减功能组件,就叫cartcontrol.vue吧。新增个底部购物车组件,叫shopcart.vue吧。在good.vue中引入并注册组件。

cartcontrol.vue中,通过props来接收list对象

因为我在json中没有设置数量这个key,所以需要全局用vue.set进行注册这个属性。在add方法中,如果没有这个属性,那么就注册,如果有,那么就count++

这里增加了一点小效果。应用了<transition>。 并且当数量减到0的时候。通过v-show来控制减号和数值是否显示。

写的比较粗糙,估计只有我自己能懂。这里要注意一下,在BScroll实例中要配置下click:true。使better-scroll滚动部分支持点击事件。否则加减号的点击事件无效。好吧~下篇写下底部的购物车功能。

点击【登录】登录成功后跳转至/index页面,并带上从/login 登录页面跳转过来的唯一标识params == 'login'

一进页面,就获取一下路由传参,如果params == 'login' 就调用获取购物车方法,否则不调用

这么做的好处是,在App.vue调用了一次getCartCount()在项目加载时先去加载获取购物车数量的方法,给头部的购物车数量赋值,但在页面刷新的时候不会再调用getCartCount(),如果用户登录——增加3件商品到购物车——退出——再登录——顶部的购物车总数量不会+3,因为再次登录只是页面刷新,在App.vue的getCartCount()方法不会再次调用,所以需要再NavHeader.vue单独再调用一次,确保购物车总数量是最新的值

vue是可以做电商平台的,主要是根据电商平台选取的方案不同vue使用方法也不同。扩展:vue能不能在电商平台使用?首先要了解什么是vue与传统JS和JQuery框架不同,Vue的渐进式框架表示开发者可以由简单组件写起,渐渐搭建出一个复杂的前端平台。形成Vue渐进式框架的核心概念为:组件化,MVVM,响应式,和生命周期。vue.js一般用的地方是:1、针对于移动端,首选vue入门成本低,快速上手;2、针对于维护较少,组件复用要求不高的项目;3、针对具有复杂交互逻辑的前端应用;4、可以提供基础的架构抽象;5、可以通过AJAX数据持久化,保证前端用户体验。vue技术涵盖了首页,商品列表页,搜索页面,购物车页面,个人中心页面使用的vue-cli3.0进行搭建项目,所以说vue不仅可以用在电商平台还可以用在页面框架。