今天來正式開始 vue的學習，首當其沖的當然是數據的渲染。畢竟數據就是拿來看的，看看如果使用 vue來展示數據。
為什么渲染
俗話說 "人靠衣裝馬靠鞍", 那咱們的代碼就是得靠 UI 來展現了。實現的代碼規不規范，表不標准那是后話。但必須要好看~（開個玩笑，代碼同樣要注意整潔與優雅噢）
數據無論放在后台、數據庫還是緩存，對於用戶而言都不知情。用戶能夠感受到的，就是 UI，因此我們的數據是需要渲染在頁面上顯示出來給用戶看的。
題外話：很久之前，老師就經常提起一句話，文不如字，字不如表，表不如圖。細來想想，這句話也是可以放在程序設計中的，尤其是面向用戶的層面。
如何渲染
在 vue 中，自帶了模板渲染，而模板的語法也非常簡潔易懂。
在此之前，先來看看要做哪些准備工作。
- 渲染的語法是
{{ 要渲染的內容 }}，要渲染的內容被兩對花括號包了起來。 - 要渲染的數據必須是
this作用域可訪問到的，簡單的使用我們可以換一句話來約束：要渲染的數據請放在data()中(此描述僅為簡化在初學之時涉及知識過廣的問題，現在只專注於渲染)。
簡單渲染
我們首先在 data() 中定義我們需要渲染的字段，並給其賦一個初始值。
data() {
return {
msg: 'hello vue'
}
}
接下來在頁面中，使用我們已經定義的字段，將其渲染在頁面上。
{{ msg }}
代碼如下：
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'hello vue'
}
}
}
</script>
效果如下：
優點：
- 代碼簡單
缺點：
- 只能直接渲染
表達式渲染
當我們的數據需要某種單獨的處理時，簡單渲染就不能滿足我們的要求了。
此時我們可以選擇使用 "表達式" 進行渲染。
比如說在渲染列表項時，我們需要顯示序號。而數組的下標是從 0 開始，但是顯示序號又是從 1 開始的。
此時我們可以進行如下操作：
<h1>{{ index + 1 }}</h1>
此時所有的序號就是從 1 開始的了，很完美。
在文中例子基礎上，在渲染的數據前面顯示提示性文字 "標題："。
<h1>{{ "標題：" + msg }}</h1>
效果如下：
優點：
- 對數據進行多樣化的處理
缺點：
-
造成大量的硬編碼，不利於維護和重構
-
相同處理邏輯會產生大量重復代碼。
函數渲染
使用表達式渲染適合某類需要特殊處理的數據，並且這個處理不具備通用性。
那么針對表達式渲染的缺點，尤其是重復代碼的問題，我們可以對其進行封裝。
現在我們有一個時間類型的字段：
data() {
return {
time: new Date()
}
}
看看簡單渲染的效果：
這好像和我們想的不太一樣啊，一般顯示的格式是：
2019-07-01 20:54:45
這兩個差距有點大啊，先用表達式渲染來處理一下達到要求的格式：
{{ time.getFullYear() + "-" + time.getMonth() + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() }}
這么長一串的代碼，看看能否達到要求的效果：
不是很完美！月和日這里沒有做填充處理，所以不是很好的匹配要求。
這個時候，你發現系統中還有 n 個頁面需要格式化時間！！！難道要一個個復制？那可能下一個維護代碼的人要掏出他30米長的大刀來找你了。
面對這種具備通用性或者是大量重復的處理邏輯，就可以將其抽成一個函數：
methods: {
formatTime: function(date) {
return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
}
這里要注意，在 vue中，函數需要定義在 methods對象內，才能在作用域內調用。
下面來看看效果,和上面的一樣：
優點：
-
邏輯可封裝，利於維護和重構。
-
寫法簡單。
缺點：
- 都能用函數了，還要啥自行車。
能不能寫js邏輯呢，不如說if？
百聞不如一見？讓我們看看下面的代碼會顯示什么：
<h1>{{ if(msg == '1') return time }}</h1>
當設置 msg 的值為 1 的時候, 返回時間？
嗯，顯示的內容很出乎意料，報錯了~
畢竟 vue 官方文檔在最開始就說了，這是一個簡潔的模板語法，可以支持函數和表達式渲染，已經能解決絕大多數的問題了。至於在渲染時帶邏輯？ 那可能需要好好看看 vue文檔了，官方有對策噢。