VUE学习笔记：6.阶段练习之购物车案例讲解

最新推荐文章于 2023-11-27 12:40:23 发布
最新推荐文章于 2023-11-27 12:40:23 发布
阅读量768 收藏 5
点赞数 3
分类专栏： vue学习笔记 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouyicnm/article/details/117635429
版权

1.需求讲解

在这里插入图片描述

我们不仅要实现上面的页面，还要实现以下功能：

  • 实现购买数量的增减，且数量为1时-按钮不可点击。
  • 实现移除操作：点击移除按钮，对应书籍从购物车中移除。
  • 当所有书籍全部移除时，界面显示文字购物车为空
  • 总价为各书籍价格*购买数量之和

2.页面基本搭建

我们先创建3个文件index.html，style.css，main.js来分别存放我们的HTML，CSS，JS代码。

先在main.js文件中，实例化一个vue，并增加书籍数据对象。

let vm = new Vue({
	el: "#app",
	data: {
		books:[
			{
				id:1,
				name: '算法导论',
				date: '2006-9',
				price: 85,
				number: 1,
				},
			{
				id:2,
				name: 'UNIX编程艺术',
				date: '2006-2',
				price: 59,
				number: 1,
				},
			{
				id:3,
				name: '编程珠玑',
				date: '2008-10',
				price: 39,
				number: 1,
				},
			{
				id:4,
				name: '代码大全',
				date: '2006-3',
				price: 128,
				number: 1,
				}

		]
	}
	
});

任何在index.html文件中，搭建页面骨架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
		
		
	</head>
	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<td></td>
						<td>书籍名称</td>
						<td>出版日期</td>
						<td>价格</td>
						<td>购买数量</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="book in books">
						<td>{{book.id}}</td>
						<td>{{book.name}}</td>
						<td>{{book.date}}</td>
						<td>{{book.price}}</td>
						<td>
							<button type="button">+</button>
						{{book.number}}
							<button type="button">-</button>
						</td>
						<td>
							<button type="button">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./main.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

在style.css文件中设置css样式

table{
	border: 1px solid #E9E9E9;
	border-collapse: collapse;
	border-spacing: 0;
}
th, td{
	padding: 8px 16px;
	border: 1px solid #E9E9E9;
	text-align: left;
}
th{
	background-color: #f7f7f7;
	color: #5c6b77;
	font-weight: 600;
}

运行效果如下：
在这里插入图片描述
这样我们的界面基本上就搭建好了，接下来就是实现各个细节。

3.使用过滤器（filters）实现价格的细节

我们需要对我们价格数据做一些特殊处理后1.增加￥符合；2.保留两位小数。对于这种需要将vue中的数据做一些格式化操作再输出的需求，我们可以使用vue中的过滤器filters来实现。

定义过滤器格式如下：

new Vue({
	el: "#app",
	filters: {
	//定义一个过滤器showPrice
	showPrice: function(price){
		return '￥' + price.toFixed(2)
	}
	
	}
});

使用过滤器格式：

<!--使用`|`后面跟上过滤器名字来调用过滤器，vue会自动将`|`前面的数据作为参数传入过滤器中-->
<td>{{book.price | showPrice}}</td>

继续完善我们的案例：

先修改main.js文件，增加一个过滤器

let vm = new Vue({
	el: "#app",
	data: {
		books:[
			{
				id:1,
				name: '算法导论',
				date: '2006-9',
				price: 85,
				number: 1,
				},
			{
				id:2,
				name: 'UNIX编程艺术',
				date: '2006-2',
				price: 59,
				number: 1,
				},
			{
				id:3,
				name: '编程珠玑',
				date: '2008-10',
				price: 39,
				number: 1,
				},
			{
				id:4,
				name: '代码大全',
				date: '2006-3',
				price: 128,
				number: 1,
				}

		]
	},
	filters: {
		//定义一个过滤器showPrice
		showPrice: function(price){
			return '￥' + price.toFixed(2)
		},
	}
	
});

修改index.html文件，对价格数据使用过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
		
		
	</head>
	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<td></td>
						<td>书籍名称</td>
						<td>出版日期</td>
						<td>价格</td>
						<td>购买数量</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="book in books">
						<td>{{book.id}}</td>
						<td>{{book.name}}</td>
						<td>{{book.date}}</td>
						<td>{{book.price | showPrice}}</td>
						<td>
							<button type="button">+</button>
						{{book.number}}
							<button type="button">-</button>
						</td>
						<td>
							<button type="button">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./main.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

效果如下：
在这里插入图片描述
后续如果有数据还需要这种格式化输出都可以调用该过滤器。

4.实现购买数量的增减操作

我们可以对数量栏的+ -按钮绑定点击事件监听，来实现数量的加减。

在index.html文件中，绑定监听事件jiaclick和jianclick

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
		
		
	</head>
	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<td></td>
						<td>书籍名称</td>
						<td>出版日期</td>
						<td>价格</td>
						<td>购买数量</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="book in books">
						<td>{{book.id}}</td>
						<td>{{book.name}}</td>
						<td>{{book.date}}</td>
						<td>{{book.price | showPrice}}</td>
						<td>
							<button type="button" @click="jiaclick(book)">+</button>
						{{book.number}}
							<button type="button" @click="jianclick(book)">-</button>
						</td>
						<td>
							<button type="button">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./main.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

在main.js文件中，在vue实例的methods中创建对应的事件监听方法jiaclick和jianclick。

let vm = new Vue({
	el: "#app",
	data: {
		books:[
			{
				id:1,
				name: '算法导论',
				date: '2006-9',
				price: 85,
				number: 1,
				},
			{
				id:2,
				name: 'UNIX编程艺术',
				date: '2006-2',
				price: 59,
				number: 1,
				},
			{
				id:3,
				name: '编程珠玑',
				date: '2008-10',
				price: 39,
				number: 1,
				},
			{
				id:4,
				name: '代码大全',
				date: '2006-3',
				price: 128,
				number: 1,
				}

		]
	},
	filters: {
		//定义一个过滤器showPrice
		showPrice: function(price){
			return '￥' + price.toFixed(2)
		},
	},
	methods:{
		//+按钮点击事件方法
		jiaclick: function(book){
			return book.number++;
		},
		//-按钮点击事件方法
		jianclick: function(book){
			return book.number--;
		}
	}
	
});

此时效果如下：
在这里插入图片描述

5.实现当数量为1时，-按钮不可点击

我们通过当数量为1时，给-按钮标签添加disabled属性来实现。

修改index.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
		
		
	</head>
	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<td></td>
						<td>书籍名称</td>
						<td>出版日期</td>
						<td>价格</td>
						<td>购买数量</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="book in books">
						<td>{{book.id}}</td>
						<td>{{book.name}}</td>
						<td>{{book.date}}</td>
						<td>{{book.price | showPrice}}</td>
						<td>
							<button type="button" @click="jiaclick(book)">+</button>
						{{book.number}}
							<!--:disabled="表达式/变量"当后面的表达式或变量为true时，添加disabled属性-->
							<button type="button" @click="jianclick(book)" :disabled="book.number<=1">-</button>
						</td>
						<td>
							<button type="button">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./main.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

此时效果如下：
在这里插入图片描述

6.实现移除按钮的功能

移除按钮功能的实现，我们依旧使用监听移除按钮的点击事件的方式来实现。

修改index.html文件，给移除按钮绑定事件监听removeclick。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
		
		
	</head>
	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<td></td>
						<td>书籍名称</td>
						<td>出版日期</td>
						<td>价格</td>
						<td>购买数量</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(book,index) in books">
						<td>{{book.id}}</td>
						<td>{{book.name}}</td>
						<td>{{book.date}}</td>
						<td>{{book.price | showPrice}}</td>
						<td>
							<button type="button" @click="jiaclick(book)">+</button>
						{{book.number}}
							<!--:disabled="表达式/变量"当后面的表达式或变量为true时，添加disabled属性-->
							<button type="button" @click="jianclick(book)" :disabled="book.number<=1">-</button>
						</td>
						<td>
							<button type="button" @click="removeclick(index)">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./main.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

在main.js中完成移除按钮事件监听方法removeclick的定义。

let vm = new Vue({
	el: "#app",
	data: {
		books:[
			{
				id:1,
				name: '算法导论',
				date: '2006-9',
				price: 85,
				number: 1,
				},
			{
				id:2,
				name: 'UNIX编程艺术',
				date: '2006-2',
				price: 59,
				number: 1,
				},
			{
				id:3,
				name: '编程珠玑',
				date: '2008-10',
				price: 39,
				number: 1,
				},
			{
				id:4,
				name: '代码大全',
				date: '2006-3',
				price: 128,
				number: 1,
				}

		]
	},
	filters: {
		//定义一个过滤器showPrice
		showPrice: function(price){
			return '￥' + price.toFixed(2)
		},
	},
	methods:{
		jiaclick: function(book){
			return book.number++;
		},
		jianclick: function(book){
			return book.number--;
		},
		//增加移除按钮的点击事件
		removeclick: function(index){
			this.books.splice(index,1);
		}
	}
	
});

现在界面效果如下：
在这里插入图片描述

7.实现当界面所有书籍都移除时，显示提示信息购物车为空

该功能我们可以使用v-if和v-else来实现。

修改index.html文件如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
		
		
	</head>
	<body>
		<div id="app">
			<!--当books列表的长度大于0时，才展示table列表-->
			<div v-if="books.length>0">
				<table>
					<thead>
						<tr>
							<td></td>
							<td>书籍名称</td>
							<td>出版日期</td>
							<td>价格</td>
							<td>购买数量</td>
							<td>操作</td>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(book,index) in books">
							<td>{{book.id}}</td>
							<td>{{book.name}}</td>
							<td>{{book.date}}</td>
							<td>{{book.price | showPrice}}</td>
							<td>
								<button type="button" @click="jiaclick(book)">+</button>
							{{book.number}}
								<!--:disabled="表达式/变量"当后面的表达式或变量为true时，添加disabled属性-->
								<button type="button" @click="jianclick(book)" :disabled="book.number<=1">-</button>
							</td>
							<td>
								<button type="button" @click="removeclick(index)">移除</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!--如果books的长度<=0,则展示该标签-->
			<div v-else>
				<h3>购物车为空</h3>
			</div>
		</div>
		
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./main.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

效果如下：
在这里插入图片描述

8.实现总价的计算

总价的计算我们可以使用计算属性来实现。

先修改main.js文件，添加总价的计算属性

let vm = new Vue({
	el: "#app",
	data: {
		books:[
			{
				id:1,
				name: '算法导论',
				date: '2006-9',
				price: 85,
				number: 1,
				},
			{
				id:2,
				name: 'UNIX编程艺术',
				date: '2006-2',
				price: 59,
				number: 1,
				},
			{
				id:3,
				name: '编程珠玑',
				date: '2008-10',
				price: 39,
				number: 1,
				},
			{
				id:4,
				name: '代码大全',
				date: '2006-3',
				price: 128,
				number: 1,
				}

		]
	},
	filters: {
		//定义一个过滤器showPrice
		showPrice: function(price){
			return '￥' + price.toFixed(2)
		},
	},
	methods:{
		jiaclick: function(book){
			return book.number++;
		},
		jianclick: function(book){
			return book.number--;
		},
		//增加移除按钮的点击事件
		removeclick: function(index){
			this.books.splice(index,1);
		}
	},
	computed:{
		// 定义总价的计算属性
		totalPrice: function(){
			let totalprice = 0;
			for (let i in this.books){
				totalprice = totalprice + this.books[i].price*this.books[i].number;
			};
			return totalprice;
		}
	}
});

修改index.html文件，调用总价的计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
		
		
	</head>
	<body>
		<div id="app">
			<!--当books列表的长度大于0时，才展示table列表-->
			<div v-if="books.length>0">
				<table>
					<thead>
						<tr>
							<td></td>
							<td>书籍名称</td>
							<td>出版日期</td>
							<td>价格</td>
							<td>购买数量</td>
							<td>操作</td>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(book,index) in books">
							<td>{{book.id}}</td>
							<td>{{book.name}}</td>
							<td>{{book.date}}</td>
							<td>{{book.price | showPrice}}</td>
							<td>
								<button type="button" @click="jiaclick(book)">+</button>
							{{book.number}}
								<!--:disabled="表达式/变量"当后面的表达式或变量为true时，添加disabled属性-->
								<button type="button" @click="jianclick(book)" :disabled="book.number<=1">-</button>
							</td>
							<td>
								<button type="button" @click="removeclick(index)">移除</button>
							</td>
						</tr>
					</tbody>
				</table>
				<!--使用计算属性来渲染总价-->
				<div>
					总价:{{totalPrice | showPrice}}
				</div>
			</div>
			<!--如果books的长度<=0,则展示该标签-->
			<div v-else>
				<h3>购物车为空</h3>
			</div>
		</div>
		
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./main.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

最终效果如下：
在这里插入图片描述
到这里该案例的功能点基本上都实现了👏👏👏。

new nm个对象
关注
专栏目录
vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: ‘/carsend‘. This may cause an update err
郭宝的博客
03-12 6817
背景： 在运行一个Vue项目时，出现了如下报错信息 vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: '/carsend'. This may cause an update error. 解决办法： 错误提示说，检测到重复的密钥：“/carsend”。这可能会导致更新错误。 初步判断是路由路径重名了，那么根据这条线索，全局搜索/carsend 路由路径，查找相似路径，如下图所示，确实有两个相同的路由路径 那...
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
郭宝的博客
06-24 11万+
错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...
Vue（9）购物车练习
weixin_43880991的博客
06-30 211
购物车案例 经过一系列的学习，我们这里来练习一个购物车的案例   需求：使用vue写一个表单页面，页面上有购买的数量，点击按钮+或者-，可以增加或减少购物车的数量，数量最少不得少于0，点击移除按钮，会移除该商品，当把所有的商品移除后，页面上的表单消失，然后出现文字：购物车为空，表单下方是商品的总价格，随着商品的数量增加而增加，默认是0元，总体效果如下： 代码实现 <!DOCTYPE htm...
vue小练习之购物车实现
qq_34448522的博客
12-07 522
今天从网上找了一个购物车的小例子，照着敲了一下，收获不少。下面的用一个小动图展示一下成果： 接下来上代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;link href="css/shoppingcart.css" rel="stylesheet"
【vue】购物车案例（实训1.6）
qq_45746744的博客
01-05 2615
0. 实现步骤 ① 初始化项目基本结构 ② 封装 EsHeader 组件 ③ 基于 axios 请求商品列表数据 ④ 封装 EsFooter 组件 ⑤ 封装 EsGoods 组件 ⑥ 封装 EsCounter 组件 1. 初始化项目结构 1. 运行如下的命令，初始化 vite 项目： npm init vite-app code-cart cd code-cart npm install 2. 清理项目结构： 把 bootstrap 相关的文件放入 src/assets 目录下 在 main.js 中导
Vue实战之商品购物车案例
CamphorBlossom的博客
01-02 2083
学习Vue框架有一段时间了，所以找了个案例练练手，借此来巩固所学知识以及如何将其运用在实际生活场景，学以致用不就是这个意思嘛<_<。好了，废话不多说，切入正题。 该案例是利用Vue的计算属性、内置指令、方法等内容，完成一个具有代表性的小功能：购物车。 在写代码之前，先对需求进行分析，这样有助于我们理清业务逻辑，尽可能还原设计与产品交互。干程序很忌讳冲上来一股脑霹雳哗啦写代码。 购物车需要展示一个已加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作等信息，还需要实时显示购买的总
Vue篇——购物车案例
J-April的博客
02-07 4454
利用Vue实现购物车的简单运用 借助layui框架实现组件（如table）的快速搭建 通过Vue实现从后端获取数据到前端的展示 实现移除书籍功能（添加和修改书籍信息功能暂未实现） 实现书籍购买数量的增加或减少，并且能够实现总价格的动态变化 … 程序效果截图 实现代码 首先导入layui的关键代码，笔者将其放在本项目的同级目录下（layui关键代码可在官方处下载，这里不再赘述） 创建html、css和JavaScript目录 html <!DOCTYPE html> <html
vue-cli中的:visible.sync是什么
qq_42459832的博客
02-20 1万+
在做项目是以为:visible.sync是elementUI中的学法，用来显示和隐藏一个弹框，其实这个是vue当中的一个写法。 :visible指的是属性绑定，表示弹框的显示隐藏，当：visible的值诶true时，弹框显示，当为false时，弹框隐藏。 sync指的是同步动态双向来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的是发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定原则。 在vue中同一加上 .sync 来表示同
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
Vue:配置.env.dev文件不生效的问题
席木木的博客
06-18 5709
Vue项目的.env.dev文件配置如下，但是在启动项目之后，通过process.env.VUE_APP_SCISERVE获取到的变量值一直为undefined❓❓❓💢💢💢。
vue.js购物车案例
09-27
这是一个Vue.js购物车的案例， 里面有增加、删除等功能，这是之前我写APP的购物车时用到的，希望对大家有帮助
jsp购物车实验报告
12-21
主要是对购物车实验报告的总结http://passport.csdn.net/ActivateUser.aspx?UserName=meimei686998&Code=xmnY6NFnS02IFtFAT7pnl3Eao7onY4FViAh1001diRcsBIfP6xWTnJEHw1WezmY6j7mgBevj7meKtT8NCXmnmWJ%2fjLnJ%2bhSf
购物车J2EE实训报告
06-17
购物车代码，struts形式，能实现查询，修改，购物，结账等功能
基于Vue技术实现的购物网站（含设计报告）
06-30
本项目适用于课程设计，利用Vue实现的一个模仿antd官网的购物网站。项目功能如下所示。 1）前端功能 商品分类展示; 商品详情 商品搜索 订单详情(购物车) 登录与注册 注意：注册用户可以购买商品，非注册用户仅可以浏览、查询商品 2）后端功能（可选） 提供商品查询接口，满足系统功能。 或者：使用模拟数据，不需要后端提供数据接口 本项目采用的是模拟静态数据，所以不具备数据库文件。
Vue全家桶之实现购物车案例图文讲解
Code皮皮虾的博客
09-13 1891
文章目录1、基本环境搭建2、使用过滤器对价格进行优化3、改变购买数量4、实现移除按钮并计算总价格5、完整代码 1、基本环境搭建 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css">
案例:购物车案例（vue组件总结）
酷爱前端的小陈博客
04-25 2537
1. 案例效果 2. 实现步骤 ① 初始化项目基本结构 ② 封装MyHeader 组件 ③ 基于axios 请求商品列表数据（ GET 请求，地址为 https://www.escook.cn/api/cart） ④ 封装MyFooter 组件 ⑤ 封装MyGoods 组件 ⑥ 封装MyCounter 组件 3. 完整代码： 项目目录： main.js部分： import Vue from 'vue' import App from './App.vue' ...
vue基础篇实战总结一：购物车实战
不断行走的菜鸟的博客
08-16 1422
上周看完了vue基础篇 本想继续看 本着基础不牢地动山摇的原则 特地总结重新再写一遍基础篇中实战开发过的一些小东西，以加深熟练度 如果还没有开始vue学习的朋友可以看这本书，还不错 链接：https://pan.baidu.com/s/110W8Rv0ZtxpQdmh3UQNx8A 提取码：qwd1 ok，接下来开始我的总结之路把！ 第一个实战： 开发一个购物车 首先，咱们先把长相弄出来(也就...
新手学习vue.js 购物车实例 学习总结
ssqaiyzp的博客
02-24 1803
前期准备： 一、完成页面布局，文件结构为css,data,img,js文件夹 ，address.html,cart.html文档 二、页面引入vue.js,和vue-resource.js文件，vue-resource.js不支持IE 9以下的浏览器 vue实践 一、创建vue实例，new Vue（{}），实例中包括el，data，mounted(相当v1中的ready，但是在比较大型
vue学习笔记（七）——购物车案例及开发中的一些心得体会
最新发布
weixin_56370772的博客
11-27 218
props: [] - 只声明变量, 不能类型校验props: {} - 声明变量和校验类型规则 - 不对则报错父组件定义属性子组件接收父组件传的值。
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值