商品列表页

商品列表， 在我们的首页有一部分， 在“列表页”（第二个Tab)也会存在。

所以我们可以直接把抽取成为组件。

下面以首页中引用为例：

1. 在首页中添加代码

  1. <template>
  2.   <div class="background">
  3.     <div class="home">
  4.       <div class="m_layout">
  5.         <div class="product_top">
  6.           <div class="product_left">
  7.             <div>商品列表</div>
  8.           </div>
  9.         </div>
  10.         <span class="divider" style="height: 2px;"></span>
  11.         <!-- 这里循环显示特产商品列表 -->
  12.         <SpecialMarket :id="good.id" :name="good.name" :description="good.description" :image_url="good.image_url" v-for="good in goods"></SpecialMarket>
  13.       </div>
  14.     </div>
  15.     <NavBottomView :is_shops_index="is_shops_index"></NavBottomView>
  16.   </div>
  17. </template>
  18. <script>
  19.     // 在这里引入 特产component
  20.     import SpecialMarket from '../../components/SpecialMarket.vue';
  21. </script>

上面的核心代码按如下：

  1. <!-- 这里循环显示特产商品列表 -->
  2. <SpecialMarket :id="good.id" :name="good.name" :description="good.description" :image_url="good.image_url" v-for="good in goods"></SpecialMarket>

使用了v-for 和 componment的组合，来显示列表。

2. 在component中添加该文件

新增文件 src/components/SpecialMarket.vue: 

  1. <template>
  2.   <div>
  3.     <div @click="show_goods_details" class="fu_li_zhuan_qu" >
  4.       <img :src="image_url" class="logo_image"/>
  5.       <div class="content" >
  6.         <div class="title">
  7.           {{name}}
  8.         </div>
  9.         <div class="logo_and_shop_name">
  10.           <span v-html="description"></span>
  11.         </div>
  12.       </div>
  13.     </div>
  14.     <span class="divider" style="height: 2px;"></span>
  15.   </div>
  16. </template>
  17. <script>
  18. import { go } from '../libs/router'
  20.     export default{
  21.         data(){
  22.             return {
  23.             }
  24.         },
  25.         props: {
  26.           id: Number,
  27.           name: String,
  28.           description: String,
  29.           image_url: String,
  30.         },
  31.         mounted(){
  32.         },
  33.         methods:{
  34.          show_goods_details () {
  35.            go("/shops/goods_details?good_id=" + this.id, this.$router)
  36.          },
  37.         },
  38.         components:{
  39.         },
  40.     }
  41. </script>

可以看到，该段代码会接受一个数组，然后循环显示。 点击任意一个按钮， 跳转到详情页面。

总结

这里算是最简单的地方了。