Vue2+VueRouter2+Webpack+Axios 構建專案實戰2017重製版(八)渲染一個列表出來
前情回顧
好,這章開始,真的得寫點東西了。
製作 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 © 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 原創,點選-首發連結。