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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
javascript中如何处理引号编码"
Aug 15 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
webpack下实现动态引入文件方法
Feb 22 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
Node.js+ELK日志规范的实现
May 23 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
PHP4之真OO
2006/10/09 PHP
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
smarty的保留变量问题
2008/10/23 PHP
基于empty函数的判断详解
2013/06/17 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
js生成的验证码的实现与技术分析
2014/09/17 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
详解js类型判断
2018/05/22 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
闭幕式主持词
2014/04/02 职场文书
白鹤梁导游词
2015/02/06 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书