购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布局,这里,我直接用bootstrap快速搭建的一个简单的布局 <div class="container" id="app"> <h2 class="page-header">购物车</h2> <table…

视频学习网址:http://www.imooc.com/learn/796 源码打包:https://codeload.github.com/fachaoshao/Vue-ShoppingCart/zip/master(before为老师未写功能的源码,after为实现功能后的源码): 注意:以上源码请在 Apache 打开状态打开浏览: 该教程在功能上实现了: 1)将  .json文件数据发送http请求,通过遍历数组将数据渲染到页面: 2)创建过滤器实现了价格加"￥"和保留2位小数…

第五节 单件商品金额计算和单选全选功能 1.vue精髓在于操作data模型来改变dom,渲染页面,而不是直接去改变dom 2.加减改变总金额功能: html:<div class="cart-tab-3"> <div class="item-quantity"> <div class="select-self select-self-open"> <div class="quentity&quo…

第四节 v-on实现金额动态计算 用￥金额 进行格式处理,可以使用原生js进行转换,但是在vuei,使用filter过滤器更加方便 注: 1.es6语法=>和import等 好处在于res参数后的function函数内的this作用域,不弄在外部声明变量了. methods:{ cartView:function(){ let _this=this; this.$http.get("data/cartData.json",{"id":123}).then( r…

第三节 使用v-for渲染商品列表 1.使用vue-resource插件引入json数据 (注:在谷歌中调试打断点-- ,console还可以输出vm,res等属性列表,或者productList等一些值.如打出vm可以查看vue实例包含的属性和方法等) html:<ul class="cart-item-list"> <li v-for="(item,index) in productList"> <!--v-for="it…

第七节 卡片选中,设置默认 1.卡片选中html:<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index"> <!--循环判断currenIndex,控制当前选中卡片的样式-->js: data:{ currentIndex:0,},2.设置默认html…

第六节 地址列表过滤和展开所有的地址 html:<li v-for="(item,index) in filterAddress">js: new Vue({ el:'.container', data:{ limitNum:3, addressList:[], }, mounted:function () { this.$nextTick(function () { this.getAddressList(); }); }, computed:{ filterAddres…

第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ①npm:安装vue (注: 要先安装cnpm cnpm:淘宝团队提供的一个npm的镜像,在国内使用不会卡顿,方便FQ --save-dev:将包安装到package.json中的devDependencies开发包中 --save是安装到默认package的dependencies库中) 指令:cn…

第一节  vue知识 vue-resource:和后台交互的一个插件,实现get.post和jsonp等功能.(替代jQuery) vue特点: 1.易用:通过创建vue实例,{{}}绑定数据十分方便,如果是jQuery还要获取值,设定十分繁琐 2.灵活-渐进式 ①渲染字段:②公共头部和公共尾部做成组件:③单页面会用到:④管理组件状态,vuex⑤使用构建工具完结项目 3.高效 ①16kb min+gzip的运行大小:②超快虚拟DOM:③最省心的优化 vue基础指令介绍: 1.指令的使用: v-m…

路由跳转 当我们想要实现点击链接跳转时,可以使用$router来进行跳转 语法如下: '}}) 这里path是要跳转的路径,query里面是路径跳转时要携带的参数,以对象的形式存在 2 获取路由参数 跳转路由过后,我们可能想要获取路由上的参数,这里我们可以使用 this.$route.query.id (id为想要获取的参数) 3 获取当前页面的路径 想要获取当前文件的路径名称,除了原声的location.href之外,也可以利用$route来获取 this.$route.path 4 离开页面…