Vue.js 由 1 到 2 的旅程 - (2)

第二集，我們要聊的是一個很瑣碎的點也許會造成您困惑，在精神不濟的情況下建議略過本文。如果您跟我一樣閱讀的是英文版的文件加上英文又不是很牛，那麼我想這個點可能會造成您的困惑。
如果您也曾對 string templates 和 non-string templates 兩個詞有疑惑的話就讓我們繼續看下去

在開始之前

我們要先介紹的是 Vue 的 templates 提供了兩種實作方式。什麼意思，就是我們可以透過 Vue 的 template 屬性（options）或者 DOM templates 的方式來撰寫樣板。看看下面兩種範例

No 1 template 屬性

// template 屬性
new Vue({
  el: '...',
  template: `
1
`
})

No 2 DOM templates

不同的 HTML 與 Javascript 檔案：

  
  
{{ message }}

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js'
  }
})

小結一下就是 template 可以寫在 Javascript 又或者寫在 HTML 裡面。

疑惑的產生

當我們開始閱讀 Vue 2 官方文件時，會發現在第一版時並沒有 Template Syntax 一章。
原因是在該章節的一開始便開宗明義的提到：

Under the hood, Vue compiles the templates into Virtual DOM render functions.

這個點算是第二版一個極大的變化。所以我們理解 Vue 會將 template 屬性 或者 DOM Templates 即標籤結構寫在 HTML 裡面的作法編譯成 render function。

接著 Template Syntax 一節提到

Vue is not a string-based templating engine

所以 Vue 並不是 string-based 的樣板引擎會編譯成 render function 我們懂了。
但是 Components 一章竟然出現

It should be noted that these limitations do not apply if you are using string templates from one of the following sources