用vue.js生成简单水果购物车

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面。要创建一个简单的水果购物车功能，我们可以按照以下步骤：

1. **设置项目**：首先，安装 Vue CLI（命令行工具），然后初始化一个新的 Vue 应用：

   vue create fruit-cart-vue

2. **结构化组件**：
- 创建 `Fruit` 组件，展示每个水果的信息（如名称、价格等）。
- 创建 `CartItem` 组件，表示购物车中的单个商品，可以包含添加到购物车和删除的功能。
- 创建 `Cart` 组件，显示总价和总计件数，并处理购物车操作。

3. **数据绑定**：
- 在 `App.vue` 中引入并管理购物车的数据，例如 `this.fruits` 和 `this.cartItems`。

4. **模板设计**：
- 使用 Vue 的 `<template>` 标签，分别在 `Fruit`、`CartItem` 和 `Cart` 组件里编写HTML结构。
- 在 `Fruit` 组件中遍历 `fruits` 数据，生成列表。
- 在 `CartItem` 组件中，用户可以选择添加水果到购物车。

5. **事件驱动**：
- 当点击“加入购物车”按钮时，在 `CartItem` 组件内部监听点击事件，更新 `cartItems`。

6. **计算属性**：
- 在 `Cart` 组件中，利用 Vue 的计算属性计算总价格和总数。

以下是简化版的组件代码示例：

<!-- Fruit.vue -->
<template>
  <li v-for="fruit in fruits" :key="fruit.id">
    {{ fruit.name }} - {{ fruit.price }}
  </li>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        // 初始化一些水果数据...
      ],
    };
  },
};
</script>

<!-- CartItem.vue -->
<template>
  <button @click="addToCart(fruit)">加入购物车</button>
</template>

<script>
export default {
  methods: {
    addToCart(fruit) {
      this.$emit('add-to-cart', fruit);
    },
  },
};
</script>

<!-- Cart.vue -->
<template>
  <h2>购物车 ({{ cartItems.length }} 件)</h2>
  <ul>
    <CartItem v-for="item in cartItems" :key="item.id" @add-to-cart="addItem(item)" />
  </ul>
  <p>总价：{{ totalPrice }}</p>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [],
      totalPrice: 0,
    };
  },
  methods: {
    addItem(item) {
      this.cartItems.push(item);
      this.totalPrice += item.price;
    },
  },
};
</script>