Vue2.0实现购物车功能


Posted in Javascript onJune 05, 2017

简介

vue.js是由华人尤雨溪开发的一套MVVM框架。vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统,它非常适用于具有复杂交互逻辑的前端应用,如一些单页应用程序,有很多表单操作,页面中的内容需要根据用户的操作动态变化。

主要特性:

 1.响应式的数据绑定
 2.组件化开发
 3.Virtual DOM 

开发准备

工具

我使用的编辑器是sublime text3,首先要先安装个插件sublimeServer,用来搭建一个http服务器,使用详情请查看这篇博客文章: 配置Chrome支持本地(file协议)的AJAX请求

下载相关vue文件

 1.vue-resource.js
 2.vue.min.js(也可以用vue.js,开发版有错误提示) 

所有文件及说明

data文件夹存放着相关的数据,因为没有连接数据库,所以直接以json的形式展示数据,实际上数据库中也是以json的形式存储数据的,我们以此方式模拟与数据库的通信。
lib文件夹下存放引入的相关vue文件。
在js文件里创建vue实例。

Vue2.0实现购物车功能

页面展示

购物车界面:

Vue2.0实现购物车功能

该购物车实现了全选、自动计算总金额、删除等功能,点击删除后的效果如下:

Vue2.0实现购物车功能

点击结账,就会跳转到收货地址选择页面,点击more可以展开更多的地址选择,并且可以设置某个地址为默认地址,还可以指定配送方式。

Vue2.0实现购物车功能

主要知识点详解

vue是一个MVVM框架。

M(model,数据):

Vue2.0实现购物车功能

V(view,DOM视图):

Vue2.0实现购物车功能

VM(view-model,通信)

Vue2.0实现购物车功能

源码地址:https://github.com/Paranoidyang/vue2.0-shoppingCart

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
JS中substring与substr的用法
Nov 16 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 #Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 #Javascript
详解Angular 4 表单快速入门
Jun 05 #Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 #Javascript
Node.js开发第三方微信公众平台
Jun 05 #Javascript
js自定义Tab选项卡效果
Jun 05 #Javascript
纯js实现动态时间显示
Sep 07 #Javascript
You might like
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
Django中使用Celery的方法示例
2018/11/29 Python
python遍历小写英文字母的方法
2019/01/02 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python移位运算的实现
2019/07/15 Python
django 微信网页授权登陆的实现
2019/07/30 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
UNIX文件系统常用命令
2012/05/25 面试题
财务管理个人自荐书范文
2013/11/24 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
关于工资低的辞职信
2014/01/14 职场文书
人事经理岗位职责
2014/04/28 职场文书
机动车登记业务委托书
2014/10/08 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
2015年小学财务工作总结
2015/07/20 职场文书