自定义vue组件，模拟当当网的页面

在Vue.js中，自定义组件是一种创建可复用UI元素的方式，你可以通过创建单文件组件（`.vue`文件）来模拟当当网这样的电商页面。以下是一个简单的步骤：

1. **结构设计**：
- 创建一个名为`DangDang.vue`的文件作为你的组件，通常包含`template`, `script`, 和 `style` 三个部分。

<!-- DangDang.vue -->
<template>
  <div class="dd-page">
    <!-- 页面头部 -->
    <header>当当网首页</header>
    
    <!-- 商品列表 -->
    <section v-for="(product, index) in products" :key="index">
      <商品卡片 :product="product" />
    </section>

    <!-- 底部导航栏 -->
    <footer>底部链接</footer>
  </div>
</template>

<script>
export default {
  name: 'DangDang',
  data() {
    return {
      products: [
        // 这里可以是商品数据数组
      ]
    }
  },
  components: {
    '商品卡片': {
      // 定义商品卡片组件
    }
  }
}
</script>

<style scoped>
.dd-page { /* 样式规则 */ }
</style>

2. **组件定义**：
- `商品卡片` 组件需要你自己定义，它可以接受商品数据并渲染相应的信息，如标题、价格、图片等。

<!-- 商品卡片.vue -->
<template>
  <div class="product-card">
    <img :src="product.image" alt="产品图片" />
    <h2>{{ product.title }}</h2>
    <p>价格：{{ product.price }}</p>
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

3. **组件使用**：
- 在主应用中导入并使用这个自定义组件，比如在App.vue或其他视图文件中。

<template>
  <DangDang />
</template>