在上一篇博文中，我們對vue組件有了一個簡單的認識和大概的理解。在之前認識項目結構的時候，我們在/src目錄中創建了一個components的文件夾，而今天就要用到了，這個文件夾的作用就是放置我們的自定義組件。
制作header.vue組件
在components文件夾中，創建一個header.vue的文件，然后填入以下內容：
<template>
<header class="header">
<h1 class="logo">Vue Demo by 王二麻子</h1>
</header>
</template>
這樣我們的header組件就已經簡單的制作完了。
制作footer.vue 組件
同樣在components文件夾中，創建一個footer.vue的文件，然后填入以下內容：
<template>
<footer class="copy">
Copy © 王二麻子
</footer>
</template>
非常的簡單。到此我們已經把組件制作完成了，接下來要將組件運用到首頁里去。
編寫index.vue文件
廢話少說，打開/src/pages/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 () {
var v = this
v.$api.get('topics', null, function (r) {
v.list = r.data
})
}
}
}
</script>
到這里我們就把列表渲染出來了。我們來看一下實際的效果：
前面一片文章已經讓我們對 vue 組件進了簡單的認識，在這里就不在贅述，接下來的分析只挑一些重點來說明。
vue指令
如下，我先用了一個 v-for 的循環，來循環數據，在time標簽中又使用了v-text，而這些都是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>
router-link 是 VueRouter2 “聲明式導航”的寫法，在實際轉換為 html 標簽的時候，會轉化為 <a></a>，里面的 to 屬性，就相當於 a 的 href 屬性。
更多關於vue指令的信息請參見：https://cn.vuejs.org/v2/api/#指令
更多關於聲明式導航的資料請參見：https://router.vuejs.org/zh-cn/essentials/getting-started.html
獲取數據
我們從接口拿到了 r.data 的數據，讓我們自己定義的 this.list 等於這個數據，然后我們在模板中就可以用 list 進行渲染了。這里着重體現了 vue 的數據雙向綁定的特性。
var v = this
v.$api.get('topics', null, function (r) {
v.list = r.data
})
時間處理工具函數
我們在上面的代碼用到time標簽來渲染時間，但是目前來看我們的時間是一個標准的時間格式，對於用戶體驗來說不是特別理想。所以我們需要把時間來處理一下。為了能讓整個項目所有的時間都共用一個工具，我們來編寫/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>
然后，我們再來看一下實際的效果：
不知道大家有沒有發現，我們在 script 區域，引用一個函數是使用 this.getData 或者 this.list 這樣的代碼引用的。但是在 template 中，我們是不加 this 的。在 js 中，關於 this 的論文就很多，我這里不深入講解了。大家只要記住這樣用就可以了。到此列表就已經渲染出來了。