Vue 是一种先进的 JavaScript 框架，它可以为您的应用程序创建交互式用户界面。Vue 还具有现代化的工具集，可以帮助您构建更快，更高效的 SPA 应用程序。本文将介绍如何使用 Vue 创建一个 App 购物车。
## 简介
我们将创建一个简单的购物车，它将包含用户添加到其购物车中的商品，并且还将显示购物车的总计。当用户购买了一些商品时，我们将从购物车中删除相应的商品。
我们将使用 Vue 的一些核心概念，包括组件，props，事件和计算属性来创建这样的购物车。
## 组件
组件是 Vue 应用程序中的一项核心概念。组件是一个可重复使用的代码块，可以根据需要在 Vue 应用程序中使用。
在我们的购物车中，我们将使用一个由两个组件组成的体系结构：一网站做app个商品列表组件和一个购物车组件。
### 商品列表组件
商品列表组件将是我们的应用程序的入口点。它会将用户可用的商品列表显示出来。对于每个商品，我们将显示名称、价格和“添加到购物车”按钮。
“`html
商品列表
-
{{ product.name }} – {{ product.price }}
export default {
data() {
return {
products: [
{ id: 1, name: “商品1”, price: 10 },
{ id: 2, name: “商品2”, price: 15 },
{ id: 3, name: “商品3”
, price: 20 },
],
};
},
methods: {
addToCart(product) {
this.$emit(“add-to-cart”, product);
},
},
};
“`
### 购物车组件
购物车组件将会是我们的应用程序的核心部分。在这个组件中，我们将跟踪用户选择的商品，并计算购物车的总计。
“`html
购物车
-
{{ product.name }} – {{ product.price }} x {{ product.quantity }}
总计: {{ total }}
export d智电瑞创efault {
props: {
cart: { type: Array, default: () => [] },
},
computed: {
total() {
return this.cart.reduce((prev, curr) => prev + curr.price * curr.quantity, 0);
},
},
methods: {
removeFromCart(index) {
this.$emit(“remove-from-cart”, index);
},
},
};
“`
## Props
我们的组件之间需要相互通信。商品列表组件需要将被添加到购物车的商品传递给购物车组件。购物车组件需要将购物车的内容传递回父级应用程序。
为了实现这些，我们使用 Vue 的 props 概念。props 允许我们向一个子组件传递数据。
我们将传递两个 prop 给我们的购物车组件：cart 和 products。cart 属性包含用户已经选择的商品，而 products 属性包含所有的商品列表。
“`html
import ProductList from “./ProductList.vue”;
import Cart from “./Cart.vue”;
export default {
components: {
ProductList,
Cart,
},
data() {
return {
cart: [],
};
},
methods: {
addToCart(product) {
const index = this.cart.findIndex((p) => p.id === product.id);
if (index < 0) {
this.cart.push({ …product, quantity: 1 });
} else {
this.cart[index].quantity++;
}
},
removeFromCart(index) {
this.cart.splice(index, 1);
},
},
};
“`
## 事件
组件之间的通信还可以通过事件实现，这是一种我们可以在子组件中发出的信号，父级组件可以侦听此信号并采取相应的行动。
我们通过在商品列表组件中发出 add-to-cart 事件以将商品添加到购物车中，并在购物车组件中发出 remove-from-cart 事件以从购物车中删除商品。
“`html
this.$emit(“add-to-cart”, product);
“`
“`html
this.$emit(“remove-from-cart”, index);
“`
## 计算属性
我们的购物车需要计算其总计。为了实现这一点，我们将使用 Vue 的另一个核心概念：计算属性。
计算属性允许您定义一个基于其他数据的属性，这样每当依赖项中的数据更改时，计算属性将被重新计算。
“`html
总计: {{ total }}
computed: {
total() {
return this.cart.reduce((prev, curr) => prev + curr.price * curr.quantity, 0);
},
},
“`
## 结论
使用 Vue 来构建应用程序始终是一件令人愉悦的事情。Vue 的清晰 API，易于使用的工具集和清晰的文档使得开发者可以快速高效地构建出优秀的应用程序。在这篇文章中，我们学习了如何使用 Vue 来构建一个简单的购物车，了解了组件，props，事件和计算属性等Vue 的核心概念，这些概念在构建更大型和更困难的应用程序时将会非常有用。
