淺入深出Vue:資料渲染

若羽。發表於2019-07-01

今天來正式開始 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>

效果如下:

淺入深出Vue:資料渲染

優點:

  • 程式碼簡單

缺點:

  • 只能直接渲染

表示式渲染

當我們的資料需要某種單獨的處理時,簡單渲染就不能滿足我們的要求了。

此時我們可以選擇使用 "表示式" 進行渲染。

比如說在渲染列表項時,我們需要顯示序號。而陣列的下標是從 0 開始,但是顯示序號又是從 1 開始的。

此時我們可以進行如下操作:

<h1>{{ index + 1 }}</h1>

此時所有的序號就是從 1 開始的了,很完美。

在文中例子基礎上,在渲染的資料前面顯示提示性文字 "標題:"。

<h1>{{ "標題:" + msg }}</h1>

效果如下:

淺入深出Vue:資料渲染

優點:

  • 對資料進行多樣化的處理

缺點:

  • 造成大量的硬編碼,不利於維護和重構

  • 相同處理邏輯會產生大量重複程式碼。

函式渲染

使用表示式渲染適合某類需要特殊處理的資料,並且這個處理不具備通用性

那麼針對表示式渲染的缺點,尤其是重複程式碼的問題,我們可以對其進行封裝

現在我們有一個時間型別的欄位:

data() {
    return {
      time: new Date()
    }
}

看看簡單渲染的效果:

淺入深出Vue:資料渲染

這好像和我們想的不太一樣啊,一般顯示的格式是:

2019-07-01 20:54:45

這兩個差距有點大啊,先用表示式渲染來處理一下達到要求的格式:

{{ time.getFullYear() + "-" + time.getMonth() + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() }}

這麼長一串的程式碼,看看能否達到要求的效果:

淺入深出Vue:資料渲染

不是很完美!月和日這裡沒有做填充處理,所以不是很好的匹配要求。

這個時候,你發現系統中還有 n 個頁面需要格式化時間!!!難道要一個個複製?那可能下一個維護程式碼的人要掏出他30米長的大刀來找你了。

面對這種具備通用性或者是大量重複的處理邏輯,就可以將其抽成一個函式:

methods: {
    formatTime: function(date) {
      return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    }
  }

這裡要注意,在 vue中,函式需要定義在 methods物件內,才能在作用域內呼叫。

下面來看看效果,和上面的一樣:

淺入深出Vue:資料渲染

優點:

  • 邏輯可封裝,利於維護和重構。

  • 寫法簡單。

缺點:

  • 都能用函式了,還要啥自行車。

能不能寫js邏輯呢,不如說if?

百聞不如一見?讓我們看看下面的程式碼會顯示什麼:

<h1>{{ if(msg == '1') return time }}</h1>

當設定 msg 的值為 1 的時候, 返回時間?

淺入深出Vue:資料渲染

嗯,顯示的內容很出乎意料,報錯了~

畢竟 vue 官方文件在最開始就說了,這是一個簡潔的模板語法,可以支援函式表示式渲染,已經能解決絕大多數的問題了。至於在渲染時帶邏輯? 那可能需要好好看看 vue文件了,官方有對策噢。淺入深出Vue:資料渲染

相關文章