前情回顧

好，這章開始，真的得寫點東西了。

製作 header.vue 和 footer.vue 元件檔案。

不是本篇文章的重點，但是還是有比較講一下。在第三篇博文中，我們規劃了我們的專案檔案結構，當時保留了一個 components 的空資料夾。這裡，就是準備放我們的自定義元件的。

首先，我們去建立兩個空文字檔案，分別是 header.vue 檔案和 footer.vue 檔案。

然後，往裡面輸入下面的內容：

header.vue

<template>
  <header class="header">
    <h1 class="logo">
 
Vue Demo by FungLeo</h1>
  </header>
</template>

• 1
• 2
• 3
• 4
• 5

footer.vue

<template>
  <footer class="copy">
    Copy &copy; FungLeo
  </footer>
</template>

• 1
• 2
• 3
• 4
• 5

非常簡單的兩個檔案，表示我們的元件已經弄好了。

編寫 src/page/index.vue 檔案

少囉嗦，看東西：

<template>
  <div>
    <Header>
 
</Header>
    <div class="article_list">
      <ul>
        <li v-for="i in list">
          <time v-text="i.create_at"></time>
          <router-link :to="'/content/' + i.id">
            {{ i.title }}
          </router-link>
        </li>
      </ul
 
>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'
export default {
  components: { Header, Footer },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get('topics', null, r => {
        this.list = r.data
      })
    }
  }
}
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

如上，程式碼，我就把頁面渲染出來了。我們看下實際的效果：

前面一片文章已經讓我們認知了 vue 元件了。這裡我不過多的闡述，省得嫌棄我囉嗦。我只挑幾個重點來講一下：

<li v-for="i in list">
  <time v-text="i.create_at"></time>
  <router-link :to="'/content/' + i.id">
    {{ i.title }}
  </router-link>
</li>

• 1
• 2
• 3
• 4
• 5
• 6

好，html 的部分就說到這裡，更多的內容，就交給你們自由發揮去吧。

this.$api.get('topics', null, r => {
  this.list = r.data
})

• 1
• 2
• 3

2017年09月19日補充 不用箭頭函式，用普通函式怎麼寫這段程式碼

評論區，有人問用普通函式如何寫這段內容。這個是 js 的基礎內容，和 vue 本身無關。

示例程式碼如下：

var v = this
v.$api.get('topics', null, function (r) {
  v.list = r.data
})

• 1
• 2
• 3
• 4

補充結束

由於有了前面幾篇文章的積累，這裡就比較好理解了。

我們從介面拿到了 r.data 的資料，讓我們自己定義的 this.list 等於這個資料，然後我們在模板中就可以用 list 進行渲染了。這裡著重體現了 vue 的資料雙向繫結的特性。

寫一個公用的時間處理工具函式

如上面的圖片所示，由於拿到的資料是一個標準的時間格式，直接渲染在頁面上，這個效果不是很理想。因此，我們可以把時間給處理一下，然後再渲染出來。

這裡，我們可以直接在 getData () {...} 後面再寫一個方法即可。但是，在一個專案中，如果所有的地方都是這樣的時間格式，我們在每一個元件中都來寫這樣的處理方法，很顯然就顯得我們比較愚蠢了。

因此，我們可以獨立出來寫一個方法，然後在所有的地方都可以使用，這樣就比較方便了。

還記得我們在第三篇博文中，我們建立了一個 src/utils/index.js 的空文字檔案嗎？這裡，我們要用上了。

編寫 src/utils/index.js 檔案

直接給程式碼如下：

export default {
  goodTime (str) {
    let now = new Date().getTime()
    let oldTime = new Date(str).getTime()
    let difference = now - oldTime
    let result = ''
    let minute = 1000 * 60
    let hour = minute * 60
    let day = hour * 24
    let month = day * 30
    let year = month * 12
    let _year = difference / year
    let _month = difference / month
    let _week = difference / (7 * day)
    let _day = difference / day
    let _hour = difference / hour
    let _min = difference / minute

    if (_year >= 1) {
      result = '發表於 ' + ~~(_year) + ' 年前'
    } else if (_month >= 1) {
      result = '發表於 ' + ~~(_month) + ' 個月前'
    } else if (_week >= 1) {
      result = '發表於 ' + ~~(_week) + ' 周前'
    } else if (_day >= 1) {
      result = '發表於 ' + ~~(_day) + ' 天前'
    } else if (_hour >= 1) {
      result = '發表於 ' + ~~(_hour) + ' 個小時前'
    } else if (_min >= 1) {
      result = '發表於 ' + ~~(_min) + ' 分鐘前'
    } else {
      result = '剛剛'
    }
    return result
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

好，程式碼噁心了點，我拿我以前寫的程式碼改的，沒有深入優化，大家就隨便看看，大概就是這麼個東西。

寫好程式碼之後，我們儲存檔案。但是此時，我們還不能使用我們的這個方法函式。我們必須在 main.js 中將我們的方法函式給繫結上。如下程式碼：

// 引用工具檔案
import utils from './utils/index.js'
// 將工具方法繫結到全域性
Vue.prototype.$utils = utils

• 1
• 2
• 3
• 4

還記得我們先前是如何將我們的介面請求函式給繫結上的嗎？這裡其實是採用了同樣的方法。如果不記得了，可以點選連結過去看看。

好了，這樣，我們寫的這個函式，就可以隨便被我們呼叫了。我們再來修改一下我們上面的 index.vue 中的程式碼，將 time 調整為：

<time v-text="$utils.goodTime(i.create_at)"></time>

• 1

然後，我們再來看一下實際的效果：

好，我們已經看到，時間已經搞的挺好的了。

樣式，不是我這個 demo 的重點，所以，樣式自己去寫吧。我就不寫了。

不知道大家有沒有發現，我們在 script 區域，引用一個函式是使用 this.getData 或者 this.list 這樣的程式碼引用的。但是在 template 中，我們是不加 this 的。

在 js 中，關於 this 的論文就很多，我這裡不深入講解了。大家只要記住這樣用就可以了。

好，我們的列表已經渲染出來了。終於見了點真章，應該很激動了吧。下面，我們繼續。

如果文章由於我學識淺薄，導致您發現有嚴重謬誤的地方，請一定在評論中指出，我會在第一時間修正我的博文，以避免誤人子弟。

本文由 FungLeo 原創，點選-首發連結。