Vue组件简易模拟实现购物车

本文实例为大家分享了Vue组件模拟实现购物车的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <script src=”./lib/vue-2.4.0.js”></script> <style> #app{ width:600px; } #myTable{ width:500px; border-collapse:collapse; } td, th{ text-align: center; font-size:20px; border:2px solid black; } td{ height: 40px; } input{ width: 30px; text-align: center } </style></head><body> <div id=”app”> <my-cart></my-cart> </div> <script> var MyCommmodity = { props: [“list”], template:` <div> <button @click=”baicai”>白菜</button> <button @click=”qingcai”>青菜</button> <button @click=”luobo”>萝卜</button> </div> `, methods: { baicai: function(){ var cai = {}; cai.id = 4; cai.name = “白菜” cai.price = 3; cai.num = 1; this.list.push(cai) }, qingcai: function(){ var cai = {}; cai.id = 5; cai.name = “青菜” cai.price = 6; cai.num = 1; this.list.push(cai) }, luobo: function(){ var cai = {}; cai.id = 6; cai.name = “萝卜” cai.price = 8; cai.num = 1; this.list.push(cai) } } } var MyTable = { props: [“list”, “flag”], template:` <table id=”myTable”> <tr> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>操作</th> </tr> <tr :key=”item.id” v-for=”item in list”> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td> <button :disabled=”flag” @click=”sub(item.id)”>-</button> <input type=”text” :value=”item.num” @blur=”changeNum(item.id,$event)”> <button @click=”add(item.id)”>+</button> </td> <td> <button @click=”del(item.id)”>删除</button> </td> </tr> </table> `, methods: { changeNum: function(id, event){ this.$emit(“change-num”,{ id: id, type: “change”, num: event.target.value }); }, sub: function(id){ this.$emit(“change-num”,{ id: id, type: “sub” }) }, add: function(id){ this.$emit(“change-num”,{ id: id, type: “add” }) }, del: function(id){ // alert(id); this.$emit(“del-cart”,id) } } } var MyPrice = { props: [“list”], template:` <div> <span>结算：</span> <span>{{total}}</span> </div> `, computed: { total: function(){ var t = 0; this.list.forEach(item => { t += item.price * item.num; }); return t; } } } Vue.component(’my-cart’, { data () { return { flag:false, list:[{ id: 1, name: “猪”, price: “10”, num:1, }, { id: 2, name: “牛”, price: “11”, num:1, }, { id: 3, name: “鸡”, price: “13”, num:1, }] } }, template:` <div> <my-commmodity :list=”list”></my-commmodity> <my-table :list=”list” :flag=”flag” @change-num=”changeNum($event)” @del-cart=”delCart($event)”></my-table> <my-price :list=”list”></my-price> </div> `, components:{ ’my-table’:MyTable, ’my-price’:MyPrice, ’my-commmodity’:MyCommmodity, }, methods:{ changeNum: function(val){ if(val.type ===”change”){ this.list.some(item=>{ if(item.id == val.id){ item.num = val.num; return true; } }); }else if(val.type ===”sub”){ this.list.some(item=>{ if(item.id == val.id && item.num >0){ item.num -= 1; return true; } }); }else if(val.type ===”add”){ this.list.some(item=>{ if(item.id == val.id){ item.num += 1; return true; } }); } }, delCart: function(id){ var index = this.list.findIndex(item=>{ return item.id == id; }) this.list.splice(index,1) } } }) var vm = new Vue({ el: ’#app’, data:{ } }) </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

使用VueCli建立购物车

1. 建立git仓库
2. 本地建仓,克隆SSH地址
3. 使用VueCli创建项目
4. 安装VantUi
5. VantUi组件独立化在src同级目录下新建文件夹 vantui , 新建文件 index.js 在 main.js 文件中引入 vantui / index.js

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

首先，新增个商品数量的加减功能组件，就叫cartcontrol.vue吧。新增个底部购物车组件，叫shopcart.vue吧。

cartcontrol.vue中，通过props来接收list对象因为我在json中没有设置数量这个key，所以需要全局用vue.set进行注册这个属性。在add方法中，如果没有这个属性，那么就注册，如果有，那么就count++ 这里增加了一点小效果。应用了<transition>。并且当数量减到0的时候。

通过v-show来控制减号和数值是否显示。写的比较粗糙，估计只有我自己能懂。这里要注意一下，在BScroll实例中要配置下click:true。

使better-scroll滚动部分支持点击事件。否则加减号的点击事件无效。好吧~下篇写下底部的购物车功能。

2–Vue-Router

<router-view /> 存放页面路由匹配到的组件将会渲染到App.vue里的<router-view /> 那么这个App.vue里应该这样写：切换路由<router-link> src/router/main.js this.$route.params.id ———-// 获取名称为id的参数（$route不带r） rem 布局 1. 拷贝flex.min.js 文件到项目目录 2. src/main.js 导入 import “xxx.flexible.min.js” 3. 在flexible.min.js修改设计宽度 4. 修改css单位 100px = 1rem; .router-link-active 全局配置 <router-link> 默认的激活的 class .router-link-exact-active 全局配置 <router-link> 默认的精确激活的 class 导入Cookie import Cookie from ‘../assets/js/Cookie’ 使用Cookie Cookie.setCookie(“uname”,”mumu”); Cookie.delCookie(“uname”); this.uname = Cookie.getCookie(“uname”); 守卫三个参数 src/router/main.js添加 Cart购物车页面给路由配置额外的信息 { path:”/cart”, meta:{requireAuth:true} } $route.meta.requireAuth 获取 main.js里边引入css或者自己写通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。

这让你充分的使用嵌套组件而无须设置嵌套的路径。当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个空的子路由有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航）和 main（主内容）两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。

如果 router-view 没有设置名字，那么默认为 default。

电商平台可以用vue技术吗

vue是可以做电商平台的，主要是根据电商平台选取的方案不同vue使用方法也不同。扩展：vue能不能在电商平台使用？首先要了解什么是vue与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。

vue.js一般用的地方是：
1.针对于移动端，首选vue入门成本低，快速上手；
2.针对于维护较少，组件复用要求不高的项目；
3.针对具有复杂交互逻辑的前端应用；
4.可以提供基础的架构抽象；
5.可以通过AJAX数据持久化，保证前端用户体验。vue技术涵盖了首页，商品列表页，搜索页面，购物车页面，个人中心页面使用的vue-cli3.0进行搭建项目，所以说vue不仅可以用在电商平台还可以用在页面框架。

Vue的H5页面唤起支付宝支付功能

目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。

触发支付宝支付调用后台接口，后台会返回支付宝提供的form表单，我们只要在vue里面创建新节点，将返回的form表单append进去，并提交就可以唤起支付宝支付。另在此说一下这个returnUrl,它是支付后支付宝回调的页面。具体可以根据自身业务，后台写死或者由前端控制。methods(){/***支付宝支付*/goAlipay(){this.$loading.show()constdata={/*自身接口所需的一些参数*/…amount:this.price,/*支付后支付宝return的url*///returnUrl:’www.baidu.com’returnUrl:window.location.origin+window.location.pathname+’?userParams=’+this.userParams}this.$http(this.$apiSetting.alipay,data).then(res=>{this.$loading.hide()if(res.data.statusCode===’000000′){constdiv=document.createElement(‘div’)/*此处form就是后台返回接收到的数据*/div.innerHTML=res.data.data.alipayInfodocument.body.appendChild(div)document.forms[0].submit()}},error=>{this.$loading.hide()console.log(error)})}}总结以上所述是小编给大家介绍的Vue的H5页面唤起支付宝支付功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。