Vue小项目（开发一个购物车）

基于Vue知识点1（点击跳转）、Vue知识点2（点击跳转）

想要学习更多前端知识：点击Web前端专栏

接下来我们开发一个如下图所示，有最基本购物车功能的简易小项目

下面这是最基本的HTML+CSS框架！！！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实战小项目:购物车</title><style>body {font-family: Arial, sans-serif;}.cart-item {width: 50%;margin-bottom: 15px;padding: 10px;border: 2px solid gray;border-radius: 10px;background-color: #ddd;}.buttons {margin-top: 5px;}.buttons button {padding: 5px 10px;margin-right: 5px;font-size: 16px;cursor: pointer;border: none;border-radius: 3px;background-color: pink;}.buttons input {width: 25px;}.buttons button:hover {background-color: yellow;}.quantity {font-size: 18px;font-weight: bold;margin-left: 10px;}h1, h2 {color: #333;}</style>
</head>
<body><div id="app"><h1>实战小项目:购物车</h1><!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项--><div class="cart-item"><div class="buttons"><span>苹果 &nbsp;&nbsp;</span><button>-</button><span class="quantity">1&nbsp;&nbsp;</span><button>+</button><p>请输入价格：<input type="text"/> 元/斤 <br> 单价：1 元/斤</p></div></div><!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价--><h3>商品总数:  <ins> 1 </ins> 件</h3><h3>商品总价:  <ins> 1 </ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 // 2.定义方法：增加商品数// 3.定义方法：减少商品数// 4.定义方法：计算商品总数// 5.定义方法：计算商品总价// 6.暴露属性和方法}}).mount('#app');</script>
</body>
</html>

这时候还没有实现任何交互性的网页应用，单纯是一个静态网页，接下来看看怎么运用Vue来实现数据与视图的双向绑定，将其变成一个实用的小项目吧！

1、实现增加商品品类

首先我们可以先定义一个 cartItems 属性，是用来存储商品的一个（响应式）数组；再通过v-for指令遍历这个数组（假设有n个品类，则生成n个商品项）；并使用 {{item.name}} 插值表达式将每个商品名称渲染出来

<body><div id="app"><h1>实战小项目:购物车</h1><!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项--><div class="cart-item" v-for="(item, index) in cartItems"><div class="buttons"><span>{{item.name}} &nbsp;&nbsp;</span><button>-</button><span class="quantity">1&nbsp;&nbsp;</span><button>+</button><p>请输入价格：<input type="text"/> 元/斤 <br> 单价：1 元/斤</p></div></div><h3>商品总数:  <ins> 1 </ins> 件</h3><h3>商品总价:  <ins> 1 </ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },// 可以自适应添加更多商品 // { name: '芒果', quantity: 1, unit_price: 1 },// { name: '鸭梨', quantity: 1, unit_price: 1 },]);// 暴露属性和方法return{cartItems,}}}).mount('#app');</script>
</body>

这样商品品类有多少就会自动更新啦！

2、实现商品数增加

我们可以定义一个方法 increaseQuantity 用来增加商品数，并将这个方法绑定到 click 事件上，当这个按钮被点击时就会调用这个方法；因为按钮并不是同一个按钮，我们需要用到数组 v-for 遍历出来的 index 索引来区分每一个商品的商品数和单价，并且使用{{ }} 插值表达式将它们渲染出来

<body><div id="app"><h1>实战小项目:购物车</h1><!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项--><div class="cart-item" v-for="(item, index) in cartItems"><div class="buttons"><span>{{item.name}} &nbsp;&nbsp;</span><button>-</button><span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</span><!-- 使用v-on指令，调用方法时需要用到括弧，并传入index参数 --><button v-on:click="increaseQuantity(index)">+</button><p>请输入价格：<input type="text"/> 元/斤 <br> 单价：{{cartItems[index].unit_price}} 元/斤</p></div></div><h3>商品总数:  <ins> 1 </ins> 件</h3><h3>商品总价:  <ins> 1 </ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },// 可以自适应添加更多商品 // { name: '芒果', quantity: 1, unit_price: 1 },// { name: '鸭梨', quantity: 1, unit_price: 1 },]);// 2.定义方法：增加商品数const increaseQuantity = (index) => {cartItems[index].quantity += 1;  }// 暴露属性和方法return{cartItems,increaseQuantity,}}}).mount('#app');</script>
</body>

这样增加商品的按钮就做好啦！

3、实现商品数减少

减少商品数和增加商品数差不多，只是需要注意的是商品不能减少到0，只有商品数大于1的时候才可减少；相同，我们可以定义一个方法 decreaseQuantity 用来减少商品数，并使用v-on指令将这个方法绑定到 click 事件上，当这个按钮被点击时就会调用这个方法

<body><div id="app"><h1>实战小项目:购物车</h1>
<!--  --><!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项--><div class="cart-item" v-for="(item, index) in cartItems"><div class="buttons"><span>{{item.name}} &nbsp;&nbsp;</span><!-- 使用v-on指令，调用方法时需要用到括弧，并传入index参数 --><button v-on:click="decreaseQuantity(index)">-</button><span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</span><button v-on:click="increaseQuantity(index)">+</button><p>请输入价格：<input type="text"/> 元/斤 <br> 单价：{{cartItems[index].unit_price}} 元/斤</p></div></div><h3>商品总数:  <ins> 1 </ins> 件</h3><h3>商品总价:  <ins> 1 </ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },// 可以自适应添加更多商品 // { name: '芒果', quantity: 1, unit_price: 1 },// { name: '鸭梨', quantity: 1, unit_price: 1 },]);// 2.定义方法：增加商品数const increaseQuantity = (index) => {cartItems[index].quantity += 1;  }// 3.定义方法：减少商品数const decreaseQuantity = (index) => {if(cartItems[index].quantity > 1){   //只有商品数大于1的时候才可减少cartItems[index].quantity -= 1;}}// 暴露属性和方法return{cartItems,increaseQuantity,decreaseQuantity,}}}).mount('#app');</script>

这样减少商品的按钮也做好啦！

4、计算商品总数

计算商品总数可以使用计算属性 computed定义一个方法 totalItems ，然后定义一个储存商品总数的变量，遍历cartItems，取出每个商品数量将其加进变量中，最后返回变量的值；并且使用{{ }} 插值表达式将它们渲染出来（调用计算属性 computed不需要加括弧）

<body><div id="app"><h1>实战小项目:购物车</h1>
<!--  --><!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项--><div class="cart-item" v-for="(item, index) in cartItems"><div class="buttons"><span>{{item.name}} &nbsp;&nbsp;</span><button v-on:click="decreaseQuantity(index)">-</button><span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</span><button v-on:click="increaseQuantity(index)">+</button><p>请输入价格：<input type="text"/> 元/斤 <br> 单价：{{cartItems[index].unit_price}} 元/斤</p></div></div><!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价--><h3>商品总数:  <ins> {{totalItems}} </ins> 件</h3><h3>商品总价:  <ins> 1 </ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },// 可以自适应添加更多商品 // { name: '芒果', quantity: 1, unit_price: 1 },// { name: '鸭梨', quantity: 1, unit_price: 1 },]);// 2.定义方法：增加商品数const increaseQuantity = (index) => {cartItems[index].quantity += 1;  }// 3.定义方法：减少商品数const decreaseQuantity = (index) => {if(cartItems[index].quantity > 1){cartItems[index].quantity -= 1;}}// 4.定义方法：计算商品总数const totalItems = computed(() => {let total_items = 0;   //定义一个储存商品总数的变量for(const item of cartItems){  //遍历cartItems，取出每个商品total_items += item.quantity;  //将商品数量加进total_items}return total_items   //返回变量的值})// 暴露属性和方法return{cartItems,increaseQuantity,decreaseQuantity,totalItems,}}}).mount('#app');</script>
</body>

这样商品总数就能计算出来啦！

5、计算商品总价

计算商品总价一样可以使用计算属性 computed定义一个方法 totalMoney，然后定义一个储存商品总价的变量，遍历cartItems，取出的每个商品数量乘上每个商品单价将其加进变量中，最后返回变量的值；再使用v-model指令使每个价格的文本输入框与其单价数据双向绑定，并且使用{{ }} 插值表达式将它们渲染出来（调用计算属性 computed不需要加括弧）

<body><div id="app"><h1>实战小项目:购物车</h1>
<!--  --><!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项--><div class="cart-item" v-for="(item, index) in cartItems"><div class="buttons"><span>{{item.name}} &nbsp;&nbsp;</span><button v-on:click="decreaseQuantity(index)">-</button><span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</span><button v-on:click="increaseQuantity(index)">+</button><p>请输入价格：<!-- 使用v-model指令使其双向数据绑定 --><input type="text" v-model="cartItems[index].unit_price"> 元/斤 <br> 单价：{{cartItems[index].unit_price}} 元/斤</p></div></div><!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价--><h3>商品总数:  <ins> {{totalItems}} </ins> 件</h3><h3>商品总价:  <ins> {{totalMoney}} </ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },// 可以自适应添加更多商品 // { name: '芒果', quantity: 1, unit_price: 1 },// { name: '鸭梨', quantity: 1, unit_price: 1 },]);// 2.定义方法：增加商品数const increaseQuantity = (index) => {cartItems[index].quantity += 1;  }// 3.定义方法：减少商品数const decreaseQuantity = (index) => {if(cartItems[index].quantity > 1){cartItems[index].quantity -= 1;}}// 4.定义方法：计算商品总数const totalItems = computed(() => {let total_items = 0;   for(const item of cartItems){total_items += item.quantity;}return total_items})// 5.定义方法：计算商品总价const totalMoney = computed(()=>{let total_money = 0;  //定义一个储存商品总数的变量for(const money of cartItems){  //遍历cartItems，取出每个商品total_money += money.unit_price*money.quantity;  //将每个商品数量乘上每个商品单价再加进变量total_money}return total_money   //返回变量的值})// 暴露属性和方法return{cartItems,increaseQuantity,decreaseQuantity,totalItems,totalMoney}}}).mount('#app');</script>
</body>