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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
怎么清空javascript数组
May 11 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
js实现适配移动端的拖动效果
Jan 13 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注销代码(session注销)
2012/05/31 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
jQuery使用手册之一
2007/03/24 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
详解tensorflow实现迁移学习实例
2018/02/10 Python
python中的二维列表实例详解
2018/06/19 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
python实现逻辑回归的示例
2020/10/09 Python
2014年高三毕业生自我评价
2014/01/11 职场文书
社区工作者思想汇报
2014/01/13 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
2015年底工作总结范文
2015/05/15 职场文书
数学备课组工作总结
2015/08/12 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
MySQL的存储过程和相关函数
2022/04/26 MySQL