Vue.js (2) - 模版與資料

Vue.js

Vue.js 已經幫你處理好 DOM 和資料的綁定，於是你可以用很輕鬆的方式來處理資料如何呈現，而且當資料發生變動時，還會及時的反應在 View 上。

Vue.js 如何運作

我們先來看看一個最簡單的範例：

HTML<div id="app">
  {{ message }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

網頁在載入後，經過 Vue.js 的處理，瀏覽器看到的結果是：

<div id="app">
  Hello Vue!
</div>

相同的結果，如果你用 JavaScript 寫，會像這樣：

HTML<div id="app"></div>
<script>
  var app = document.getElementById("app")
  app.innerText = 'Hello Vue!'
</script>

用 jQuery 寫會像這樣：

HTML<div id="app"></div>
<script>
  $("#app").text("Hello Vue!")
</script>

我們來看看這 3 種寫法的思考邏輯。原生 JavaScript 和 jQuery 的思考方式是，我要先找到一個 id="app" 的元素名稱，然後在其中放入一段文字 (字串)。這兩個方式，你必須同時思考「取得元素」及「指定資料」。

Vue.js 的思考方式則是，我的執行範圍在 #app 也就是 id="app" 內，只要找到 {{ message }} 這個名稱的位置，我就把該名稱 message: 的資料 'Hello Vue!' 放在這裡。

Vue.js 將 HTML 當成模板，藉由 el 屬性來確認它的執行範圍，然後將資料傳給模板，處理後呈現最後看到的 View。你不再需要像原生 JavaScript 或 jQurey 一樣，必須先取得元素才能插入資料。你的所有 View 的設計，全都在 HTML 中做好，並指定要放資料的「空格」，Vue.js 會自動把資料放進它應該放的位置。於是，在 Vue 實體中，你只要給資料；在 HTML 中則思考這些資料要放哪裡，剩下的 Vue.js 會幫我們處理。

在模板中插入資料

Vue.js 的模板語法和 Laravel 的一樣，也是使用雙大括號 {{ ... }} 來包住準備要顯示的資料。

當你要使用 Vue 時，要先建立一個實體，也就是 new Vue()，然後傳入一個 Object() 物件，在 JavaScript 中，Object() 可以用 {} 來表示，所以：

Vuenew Vue(
  // 用大括號表示物件
  {
    // el 是屬性名稱，並且有一個字串資料的值 '#app'
    el: '#app', 
    // data 也是屬性名稱，它的值是物件格式，所以用大括號
    data: { 
      // message 是我們自訂的屬性名稱，值為字串
      message: 'Hello Vue!' 
    }
  }
)

el 是用來綁定 HTML 元素，它以 CSS 選擇器當字串，或是 HTML 元素名稱。但是記住不要和 <html> 或 <body> 綁定。

有個重點要注意，雖然 el 是以 CSS 選擇器來搜尋元素，但是它只會和第一個找到的元素綁定，例如你有多個 <p> 元素，當你把它放入 el 中，它只會綁在第一個找到的 <p>。

data 的值可以是物件或函式，通常會直接用物件，但在計算屬性只能使用函式，之後會提到。物件中的屬性名稱都是由我們自訂，用來和 HTML 模板中的 {{ }} 名稱相對應。

要知道 Vue 有哪些屬性可用，可以查 API。

資料綁定

我們來看一個新例子：

Vue.js 已經把資料和 DOM 綁定在一起了，所有的元素都是響應式的，也就是當資料改變時，DOM 中的內容也會跟著改變。在這個例子中的 now 資料屬性，我們每隔 1 秒的時間，把它的資料指定為當時的時間字串，於是資料改變時，Vue.js 發現資料有異動，於是在它的下一輪 update 的事件時，將畫面更新。

一次性資料綁定

當然，如果你不想讓畫面顯示的內容在之後被改變，可以使用 v-once 這個由 Vue 提供的特殊屬性來設定：

<span v-once>Now: {{ now }}</span>

改成這樣後，內容將保持在第一次指定時的資料，之後的資料異動都不會發生更新畫面的動作。

原始 HTML 資料

任何被用於綁定的資料都是純文字的，如果你的資料中有 HTML 的元素，而且你打算讓它以原始的 HTML 顯示，而不是被當成純文字，可以使用 v-html 屬性：

HTML<div id="app">
  <span v-html="message"></span>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '<del>這是段內容包含HTML</del>'
    }
  })
</script>

經由 Vue 處理後，瀏覽器看到的內容是：

<span>
 <del>這是段內容包含HTML</del>
</span>

！注意！由於安全性的理由，直接顯示由使用者任意加入的 HTML，可能導致 XSS 攻擊的風險，絕對不要讓使用者可以輸入任何 HTML 內容。

屬性資料綁定

前面介紹的資料綁定方式，都是以雙括號的方式將資料插入元素所包含的內容中。然而，雙括號的資料綁定方式無法將資料綁在 HTML 元素的屬性上，必須透過 Vue 提供的特殊屬性來做到屬性資料綁定。例如：v-bind 屬性：

HTML<div id="app">
  <a v-bind:href="url">{{ site }}</a>
  <button v-bind:disabled="isDisable">Click</button>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      site: 'Google',
      url: 'https://www.google.com',
      isDisable: true
    }
  })
</script>

連結 <a> 元素有一個指定網址的 href 屬性，我們可以透過 v-bind:href 屬性，將資料和它綁定在一起。

布林值類型的屬性也可以使用，例如按鈕的 disabled 屬性：

<!-- 按鈕失效 -->
<button disabled>Click</button>
<!-- 按鈕有效 -->
<button>Click</button>

v-bind:disabled 會在布林屬性為 true 的時候，把該屬性加上去；為 false 的時候，把它移除。

JavaScript 表達式

雙括號中除了可以綁定一般的值，還支援 JavaScript 表達式：

HTML<div id="app">
  {{ 1 + 1 }}<br>
  {{ success ? 'Yes' : 'No' }}<br>
  {{ message.toUpperCase() }}<br>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      success: true,
      message: 'javascript'
    }
  })
</script>

執行結果：

2
Yes
JAVASCRIPT

這些表達式會在 Vue 實體的資料作用域下被當成 JavaScript 解析。但限制為只能包含單個表達式，所以下面的例子都無法執行：

<!-- 這不是表達式，這是變數宣告的敍述 -->
{{ var name = 'Tony' }}

<!-- 流程控制也不行，必須使用三元運算子 -->
{{ if (failed) {return warning} }}

重點整理

Vue 透過 el 屬性找到它的執行範圍，然後在實體中 (new Vue()) 中處理資料綁定作業。
Vue 使用 HTML 建立模板，並使用雙括號 {{ }} 來插入資料。
Vue 的資料綁定類型有：透過雙括號的內容綁定、一次性資料綁定、原始 HTML 資料綁定、屬性資料綁定。
在模板的雙括號中，可以使用單個 JavaScript 表達式。

本文網址：http://blog.tonycube.com/2017/03/vuejs-2-data.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀