昨天經過辛苦的環境安裝（擦汗），可以在Rails專案寫Vue了！先來個簡單的Vue起手式緩緩心情～

在第2天，我們有提到，Vue.js 官網 這張MVVM架構的示意圖：
Model是資料邏輯：
View是使用者介面；
VM代表的是View Model。

我們可以看到原生javascript綁定事件的方式：

html

<p id="title"></p>
<button id="start">按我</button>

javascript

var title = document.getElementById("title")
title.innerHTML = "Vue feat. Rails"
document.getElementById("start").addEventListener("click", function(){
	alert("鐵人賽開始!")
})

以及比較Vue.js的差別：

在Vue.js裡，是採用Vue instance（實例）作為原本的使用者介面(UI)及Javascript的資料處理邏輯的中間層，而非直接讓js去操作UI介面的元素。

html (View)

<!-- 比起原生js，Vue.js的寫法，會在view介面上，外層需要多一層div -->
<div id="app">
  <p id="title">{ { message } } </p>
  <button v-on:click="start">按我</button>
</div>

這整塊new出一個新的Vue instance，其最特別之處，
是讓Model邏輯的變化會同步到View介面上。
而View的資料變化也會同步到Model資料邏輯中、

(View Model)

new Vue({
	el: "#app",
  data: {
  	message: "Vue feat. Rails"
  },
  methods: {
  	start(){
    	alert("鐵人賽開始!")
    }
  }
})

以上應該就可以很好的解釋，昨天的程式碼為何Vue js可以大大方方地在我的Rails專案首頁出現囉！

對照我的專案，

html (View)是這樣：

<div id="hello">Vue.js x Rails { { message } } </div>

而前端model邏輯是這樣：

document.addEventListener('turbolinks:load', () => {
  new Vue({
    el: '#hello',
    data: () => {
      return {
        message: "第12屆鐵人賽專案，參賽確定！"
      }
    },
  })
})

是不是有覺得Vue很好上手呢?!(鐵人賽才第四天，話不要說的太早)

{ { } } mustache: 鬍子語法

在昨天鐵人賽的Vue instance實例裡，我們有一個data屬性用來提供資料。
並且讓資料流向html (View)在標籤加上的{ { message } }鬍子語法內。
這被稱為One-Way Data Flow的data binding。（中文: 單向資料流的資料綁定）

Vue手冊：
The mustache tag will be replaced with the value of the message property on the corresponding data object. It will also be updated whenever the data object’s message property changes.
無論何時，綁定的資料物件上 message property 發生了改變，插值處的內容都會更新。

單向資料流傳遞 - 鬍子語法還可以傳什麼?

有單一回傳值的運算式，就可以使用鬍子語法唷！整合範例請參考：我的js fiddle例子

html

<div id="app">
  <p id="title">{{ array.map( x => x * x ) }}</p>
</div>

js

new Vue({
	el: "#app",
  data: {
  	array: [1, 3, 5, 7, 9]
  }
})

有單一回傳值的methods也可以放進去：整合範例請參考：我的js fiddle例子

html

<div id="app">
  {{ greeting() }}
</div>

js

new Vue({
	el: "#app",
  data: {
  },
  methods: {
  	greeting(){
    	return "這是鐵人賽第四天！"
    }
  }
})

鬍子語法也可以使用運算式（但合法的表達式必須是one single expression！一行可以寫完成的那種）

{ { height / 100 } }

// 三元表達式OK!
{ { ok ? true : false } }


{ { message.split(',').join('') } }

Vue Instance的物件屬性

data可以放物件或function

在起手式時，我們可以簡單地放個物件：

  data: {
  	message: "Vue feat. Rails"
  }

昨天改寫hello_vue.js時，發現Vue生出來的檔案預設data寫法是JavascriptES6中箭頭函數的寫法。

  data: () => {
    return {
      message: "第12屆鐵人賽專案，參賽確定！"
  }

所以，最後來做個統整一下，在這兩天鐵人賽的文章，我們已經練習了三種vue instance的屬性：el、data與methods!

明天來了解Vue的另一種單向資料流語法v-bind吧！

備註：

• 寫文章草稿在自己的markdown部落格時，發現{{}}鬍子語法在不同的markdown編輯器會顯示不出來，為了維持顯示內容，我會把花括弧加上的前後加上空白鍵。
• 在IT邦的markdown似乎不支援iframe標籤（嗚嗚嗚～本來有寫精美的Vue範例想要內嵌的說）不過我的blog可以正確顯示，所以有興趣的看倌可以移駕至這裏看效果。

Ref:

• Vue英文官網手冊: One-way Data Flow
• Vue中文官網手冊: 模板語法
• VUE.JS 入門 Slide - Vue 2 新手必備的姿勢