Vue3+.NET6实战 鲜花网电商项目

这是一个涉及Vue 3和.NET 6的电商项目实战系列的第一部分。由于涉及的内容较多，我将提供一个简化版的代码示例，展示如何在Vue 3中创建一个简单的组件。

<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id" class="product-item">
      <h3>{{ product.name }}</h3>
      <p>{{ product.description }}</p>
      <button @click="addToCart(product)">Add to Cart</button>
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    // 假设这是从API获取的产品列表
    const products = ref([
      { id: 1, name: 'Product 1', description: 'Description 1' },
      { id: 2, name: 'Product 2', description: 'Description 2' },
      // ...更多产品
    ]);
 
    // 模拟添加到购物车的功能
    function addToCart(product) {
      console.log(`Added ${product.name} to cart`);
      // 在这里可以调用API将商品添加到购物车
    }
 
    return {
      products,
      addToCart,
    };
  },
};
</script>
 
<style>
.product-list {
  display: flex;
  flex-wrap: wrap;
}
.product-item {
  margin: 10px;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

这个简单的Vue 3组件展示了如何使用v-for指令循环渲染列表，并使用ref来创建响应式数据。它还演示了如何添加事件处理程序来响应用户的交互，例如点击按钮添加商品到购物车。这个例子是教学电商项目的基础，展示了前后端交互的基本概念。