淺入深出Vue：數據渲染

今天來正式開始 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文檔了，官方有對策噢。