第12屆鐵人賽Day 4 Vue的單向資料流: 鬍子語法
昨天經過辛苦的環境安裝（擦汗），可以在Rails專案寫Vue了！先來個簡單的Vue起手式緩緩心情～
在第2天我們有提到，Vue.js 官網 這張MVVM架構的示意圖：
Model是資料邏輯：
View是使用者介面；
VM代表的是View Model。
我們可以看到原生javascript綁定事件的方式：
以及比較Vue.js的差別：
在Vue.js裡，是採用Vue instance（實例）作為原本的使用者介面(UI)及Javascript的資料處理邏輯的中間層，而非直接讓js去操作UI介面的元素。
這整塊是new出一個Vue instance，其最特別之處，
是讓Model邏輯的變化會同步到View介面上。
而View的資料變化也會同步到Model資料邏輯中、
(Model)
new Vue({
el: "#app",
data: {
message: "Vue feat. Rails"
},
methods: {
start(){
alert("鐵人賽開始!")
}
}
})
html (View)
<!-- 比起原生js，Vue.js的寫法，會在view介面上，外層需要多一層div -->
<div id="app">
<p id="title">{ { message } } </p>
<button v-on:click="start">按我</button>
</div>
以上應該就可以很好的解釋，昨天的程式碼為何Vue js可以大大方方地在我的Rails專案首頁出現囉！
對照我的專案，前端model邏輯是這樣：
document.addEventListener('turbolinks:load', () => {
new Vue({
el: '#hello',
data: () => {
return {
message: "第12屆鐵人賽專案，參賽確定！"
}
},
})
})
而html (View)是這樣：
<div id="hello">Vue.js x Rails { { message } } </div>
是不是有覺得Vue很好上手呢?!(鐵人賽才第四天，話不要說的太早)
{ { } } mustache: 鬍子語法
在昨天鐵人賽的Vue instance實例裡，我們有一個data屬性用來提供資料。
並且讓資料流向html (View)在標籤加上的{ { message } }鬍子語法內。
這被稱為One-Way Data Flow的data binding。（中文: 單向資料流的資料綁定）
document.addEventListener('turbolinks:load', () => {
new Vue({
el: '#hello',
data: () => {
return {
message: "第12屆鐵人賽專案，參賽確定！"
}
},
})
})
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 發生了改變，插值處的內容都會更新。
單向資料流傳遞 - 鬍子語法還可以傳什麼?
鬍子語法也可以使用運算式（合法的表達式必須是one single expression）
{ { height / 100 } }
// 三元表達式OK!
{ { ok ? true : false } }
{ { message.split(',').join('') } }
有單一回傳值的運算式，就可以使用鬍子語法唷！
有單一回傳值的methods也可以放進去：
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 instance的屬性 | 可以放置的資料型別 |
|---|---|
| el | HTML元素、字串、function |
| data | 物件、function |
| methods | function |
明天來了解Vue的另一個單向資料流語法v-bind吧！
Ref: