Vue2.0实现购物车功能
作者：Paranoidyang 发布时间：2023-07-02 16:54:22
标签：Vue,购物车
简介
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
0
投稿猜你喜欢
- Example.asp<％@LANGUAGE="VBSCRIPT" CODEPAGE="65001&qu
观前提示：本篇内容为mysql数据库实验，代码内容经测试过，可能一小部分有所疏漏，也有会不符合每个人实验的要求的地方，因此以下内容建议仅做思- golang 中多个 defer 的执行顺序引用 Ture Go 中的一个示例:package mainimport "fmt&q
- 1、最郁闷的发现！！先看代码：<style>#a #b #c span{color:red;}#b #c span{color:
- setup.py:#!/usr/bin/env python# coding=utf-8from distutils.core import
- 本文主要是对flask中的before_request与after_request用法做一个简单的分析，具体实例和介绍如下。使用before
- 什么是TCP/IP、UDP？ TCP/IP（
- 在本节描述的示例代码，提供真实的例子来示范在 FileSystemObject 对象模式中可用的许多功能。该代码显示了如何一起使用对象模式的
- 目录1、梳理一下Git、github和gitee这三个之间的关系：1.1、Github1.2、Gitee 1.3、Git2、如何安
- 1.<script language="javascript"> var str = "ajfhs
- 例子：#!/bin/perlprint "Please input an string and a number by order
- #!/usr/bin/env python#coding=utf-8import osfrom pyinotify import Watch
- 一、题目二、数学求解过程该轮迭代分类结果全部正确，判别函数为g(x)=-2x1+1三、感知器算法原理及步骤四、python代码实现及结果（1
- 如果使用的是matplotlib绘图，可以通过以下命令更改图片的大小：％matplotlib linline如果是 plt.figure(f
- 发现问题图片地址如下http://qximg.lightplan.cc/2016/09/11/1473574486942944.jpeg需要
- 前言：不知道有多少同学跟我一样，最初接触编程的动机就是为了自己做个游戏玩？今天要给大家分享的是一个 pygame 写的“
- enumerate函数用于遍历序列中的元素以及它们的下标。enumerate函数说明：函数原型：enumerate(sequence, [s
- 生成Fiboncci Fn数有Θ(1)，Θ(n)甚至指数级的算法，不过有Θ(log n)的吗？告诉你，有。首先，关于Fibonacci数，有
- 引言通过前面的文章我们已经了解到OpenCV 是一个用于计算机视觉和机器学习的开源 python 库。它主要针对实时计算机视觉和图像处理。它
- asp之家注：防止表单重复提交的方法，在客户端其实很容易实现，只要使用js让用户第一次点击提交按钮后，把提交按钮设置为disabled，这样
