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 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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
php实现简单文件下载的方法
2015/01/30 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
domReady的实现案例
2016/11/23 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Python获取系统默认字符编码的方法
2015/06/04 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Php多进程实现代码
2018/05/07 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python实现石头剪刀布程序
2021/01/20 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
NumPy统计函数的实现方法
2020/01/21 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
体育个人工作总结
2015/02/09 职场文书
警示教育观后感
2015/06/17 职场文书
小学英语教学反思范文
2016/02/15 职场文书
Oracle使用别名的好处
2022/04/19 Oracle