One Piece 已要啟航，我們要跳船嗎？

昨天我們已經大略的介紹了 vue 的使用方法與基本要素，來複習一下吧！

在我們的文件裡至少要有這三個元素，才能使 Vue.js 正常的運作：

• 載入 Vue.js 文件
• 指定渲染目標 Div
• 建立 Vue 實例物件

指定渲染目標的 Div 裡，除了有網站結構的 HTML 與在這些結構裡的樣式，也會大量使用 Vue 專屬的模板語法(Mustache)與 Vue 的專屬指令(Directives)，這些指令都是以v-為開頭，我們會在後續一一介紹，我們可以透過這些指令來控制元素執行或綁定許多行為。

大家都有看過以手在上方控制的「線人偶」吧？我們可以把綁在人偶身上不同部位的點，想像是 HTML 裡的這些用v-開頭與{{ }}雙花括號，再把人偶上方、手在控制的十字木條想像成 Vue 的實例物件，這些人偶的動作與行為，基本上都是 Vue 實例裡的資料、方法或實例生命週期鉤子在控制。這樣比喻或許可以比較簡單且容易理解這些用v-開頭與{{ }}、雙花括號和實例物件的關係。

Vue 模板語法 -- {{Mustache}}

要用{{ }}雙花括號之前，先來了解一個這個{{ }}模板語法可以裝什麼，只要{{JS 表達式}}這樣記是不是清楚很多？怎麼分辨 JS 的表達式？可以看看六角卡斯伯在這次鐵人賽的這篇JavaScript 表達式觀念及運用 - JS Expression，會釐清許多語法的觀念喔。

我們也可直接說{{ }}雙花括號的模板語法是 Mustache 「表達式(Expression)」，而能控制{{ }}模板語法裡面的那條線的另一端，就是用於渲染 Vue 實例物件裡的 data物件的內容語法。
重點：

• 表達式{{}}雙花括號只能從「Vue 實例」物件的data中獲取數據資料；
• 表達式{{}} 中不能出現「陳述式(Statement)」，比如：流程控制 if () {} / 迴圈for(var i =0 ...) {} / 宣告var num = 1/ 其它像是import和 export...等等;
• 表達式{{}} 不能在 HTML 元素的屬性上起作用；

所以{{ }}模板語法可以裝：

<div id="app">
    <h1>{{ message }}</h1>
    <p>{{ 1 + 2 }}</p>
    <p>{{ ['a', 'c', 'b'] }}</p>
    <p>{{ ['a', 'c', 'b'].join('-') }}</p>
    <p>{{ msg + ' -- Paris' }}</p>
    <p>{{ age > 3 ? '大班' : '幼幼班' }}</p>
    <p>{{ Math.random() }}</p>
</div>
<script>
  const vm = new Vue({
    el:'#app',
    data:{
      message:'Bonjour !',
      age:3
    }
  })
</script>

直接來看執行結果吧！[CodePen]](https://codepen.io/tsuifei/pen/YzqJYVm)

今天是週末，放鬆一下吧～明天就來說說我們定義的 Vue 實例裡會裝什麼，明天見囉～

每日一句法文有益身心：Bon appétit ! 繃.那.杯踢！ 祝你有好胃口(吃飯開動前說)