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代码(站点及虚拟目录)
Oct 20 Javascript
jquery 插件学习(六)
Aug 06 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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 - Html Transfer Code
2006/10/09 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
python Tornado框架的使用示例
2020/10/19 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
opencv实现图像平移效果
2021/03/24 Python
应届大专毕业生个人自荐信
2013/09/22 职场文书
中专自荐信
2013/10/13 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
护士医德考评自我评价
2015/03/03 职场文书
MySQL基础(二)
2021/04/05 MySQL
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL