Vue項目實戰（八）渲染一個列表

這一篇介紹如何使用vue渲染一個列表，公衆號已經準備了vue實戰教程，若是您有須要，能夠在公衆號回覆「vue」獲取。

 

製做 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>

 

footer.vue

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

 

很是簡單的兩個文件，表示咱們的組件已經弄好了。

 

編寫 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>

 

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

 

前面一片文章已經讓咱們認知了 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>

 

如上，我先用了一個 v-for 的循環，來循環數據。這裏能夠參考：https://cn.vuejs.org/v2/api/#v-for 文檔。

在 time 標籤中，我使用了 v-text="i.create_at" 來渲染時間數據。參考文檔： https://cn.vuejs.org/v2/api/#v-text

router-link 是 VueRouter2 「聲明式導航」的寫法，在實際轉換爲 html 標籤的時候，會轉化爲 ，裏面的 to 屬性，就至關於 a 的 href 屬性。參考文檔：https://router.vuejs.org/zh-cn/essentials/getting-started.html

 

好，html 的部分就說到這裏，更多的內容，就交給大家自由發揮去吧。

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

 

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

示例代碼以下：

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

 

因爲有了前面幾篇文章的積累，這裏就比較好理解了。

 

咱們從接口拿到了 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
  }
}

 

好，代碼噁心了點，我拿我之前寫的代碼改的，沒有深刻優化，你們就隨便看看，大概就是這麼個東西。

 

寫好代碼以後，咱們保存文件。可是此時，咱們還不能使用咱們的這個方法函數。咱們必須在 main.js 中將咱們的方法函數給綁定上。以下代碼：

// 引用工具文件
import utils from './utils/index.js'
// 將工具方法綁定到全局
Vue.prototype.$utils = utils

 

還記得咱們先前是如何將咱們的接口請求函數給綁定上的嗎？這裏實際上是採用了一樣的方法。若是不記得了，能夠點擊連接過去看看。

 

好了，這樣，咱們寫的這個函數，就能夠隨便被咱們調用了。咱們再來修改一下咱們上面的 index.vue 中的代碼，將 time 調整爲：

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

 

而後，咱們再來看一下實際的效果：

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

 

樣式，不是我這個 demo 的重點，因此，樣式本身去寫吧。我就不寫了。

 

不知道你們有沒有發現，咱們在 script 區域，引用一個函數是使用 this.getData 或者 this.list 這樣的代碼引用的。可是在 template 中，咱們是不加 this 的。

 

在 js 中，關於 this 的論文就不少，我這裏不深刻講解了。你們只要記住這樣用就能夠了。

 

做者：FungLeo