Vue2.0实现购物车功能
简介
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实例。
页面展示
购物车界面:
该购物车实现了全选、自动计算总金额、删除等功能,点击删除后的效果如下:
点击结账,就会跳转到收货地址选择页面,点击more可以展开更多的地址选择,并且可以设置某个地址为默认地址,还可以指定配送方式。
主要知识点详解
vue是一个MVVM框架。
M(model,数据):
V(view,DOM视图):
VM(view-model,通信)
源码地址:https://github.com/Paranoidyang/vue2.0-shoppingCart
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 基于典型相关分析的词向量
- 分享一波关于做 Kaggle 比赛,Jdata,天池的经验,看完我这篇就够了。
- system表空间不足的问题分析(r6笔记第66天)
- 挑战数据结构和算法面试题——最大间隔
- 一则orabbix报警的分析(r6笔记第65天)
- 中科院计算所开源深度文本匹配开源工具 MatchZoo
- 简单易学的机器学习算法——线性回归(1)
- 当主键碰到NULL(r6笔记第64天)
- 记一次dg故障的处理总结(r6笔记第63天)
- Java企业面试——Javaweb
- Linux下/var/spool/clientmqueue空间不足的解决(r6笔记第81天)
- Pytorch 0.3发布:实现多方面提速,增加对ONNX支持 | 快讯
- 基于DB time的调优分析 (r6笔记第79天)
- 通过shell脚本抓取awr报告中的问题sql(r6笔记第78天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flutter组件随笔练习
- TKE 容器健康检查最佳实践
- 微信小程序修改checkbox和radio的样式
- TRTC Android端开发接入学习之实现实时屏幕分享(四)
- Vue使用组件递归实现评论盖楼功能笔记
- 自监督注意力在密集光流估计中的应用
- SpringBoot+MyBatis+Spring 技术整合实现商品模块的CRUD操作
- 什么?面试官让我用ArrayList实现一个阻塞队列?
- A little fun with InnoDB multi-versioning(14.有关InnoDB多版本中的一个小问题)
- 聊聊java中的哪些Map:(八)ConcurrentSkipListMap源码分析
- littlevgl(Lvgl)最新版V7.4移植
- TiKV 源码解析系列文章(二十)Region Split 源码解析
- 轻松构建Tomcat源码
- Flutter中Contrainer 组件的宽高限制分析
- 10张图带你深入理解Docker容器和镜像