場景：

假設我們想要設計一個如下圖所示的網站

這裡有若干卡片元件，每一個卡片元件中包含一些連結。

如果我們把每個卡片元件都手寫出來的話，工程量很大，並且不方便後期增加卡片。

所以一個比較好的解決方案就是把資料封裝封一段json，我們只需要手寫一個卡片元件，之後用過Vue.js的v-for自己遍歷json，並生成卡片元件。

程式碼樣例

這裡我們不呈現完整的專案結構，只拿來一個vue元件做示例。

本程式碼樣例的UI框架使用的是iview。

<template>
  <Row type="flex" justify="space-around"
 
>
    <!--卡片元件遍歷起始-->
    <!--使用v-for迴圈的時候,需要配合使用:key-->
    <Col :xs="13" :sm="10" :md="10" :lg="7" v-for="bookmark in bookmarks" :key="bookmark">
      <!--如果不使用v-bind,將無法遍歷和渲染Card元件-->
      <Card v-bind="bookmark">
        <p slot="title">
          <Icon type
 
="ios-home-outline"></Icon>
          {{bookmark.title}}
        </p>
        <p>
          <Icon type="ios-star-outline"></Icon>
          <!--連結需要使用v-bind:href-->
          <a v-bind:href="bookmark.link1" target="_blank">{{bookmark.subtitle1}}</a>
        </p
 
>
        <br/>
        <p>
          <Icon type="ios-star-outline"></Icon>
          <a v-bind:href="bookmark.link2" target="_blank">{{bookmark.subtitle2}}</a>
        </p>
        <br/>
        <p>
          <Icon type="ios-star-outline"></Icon>
          <a v-bind:href="bookmark.link3" target="_blank">{{bookmark.subtitle3}}</a>
        </p>
        <br/>
        <p>
          <Icon type="ios-star-outline"></Icon>
          <a v-bind:href="bookmark.link4" target="_blank">{{bookmark.subtitle4}}</a>
        </p>
      </Card>
      <br/>
    </Col>
    <!--卡片元件遍歷結束-->
  </Row>
</template>

<script>
export default {
  name: 'Home',
  data: function () {
    return {
      'bookmarks': [
        {
          'title': '內容標題',
          'subtitle1': '內容子標題一',
          'link1': 'http://www.baidu.com',
          'subtitle2': '內容子標題二',
          'link2': 'http://www.baidu.com',
          'subtitle3': '內容子標題三',
          'link3': 'http://www.baidu.com',
          'subtitle4': '內容子標題四',
          'link4': 'http://www.baidu.com'
        }
      ]
    }
  }
}
</script>

<style scoped></style>

程式碼中的注意事項在註釋中有所說明，這裡說一下這段json，當我們想要增加卡片的時候，只需要增加json資料中的bookmarks陣列即可。

當然，如果覺得在這裡寫太長的json很麻煩，我們也可以把json單獨寫成一個檔案，之後載入進來即可。

本程式碼樣例的執行結果如下圖

題外話

個別專案配置說明(與例子不相關)

1.標題欄icon設定

檔案：“build/webpack.dev.conf.js”和“build/webpack.prod.conf.js”，這兩個檔案中，找到“new HtmlWebpackPlugin”，新增程式碼“favicon : ‘icon.ico’”

如圖

2.修改埠號

檔案：“config/index.js”，很容易找到port引數，修改即可。

3.解決URL帶有#號的問題

檔案：“src/router/index.js”，在new Router下新增mode引數為history，如圖：

4.“x-invalid-end-tag”錯誤問題(不知道是不是iview本身才這樣子)

檔案：“.eslintrc.js”，在rules配置中新增：”vue/no-parsing-error”: [2, { “x-invalid-end-tag”: false }]，如圖：