通關密碼就是這些了，記熟了就通行無阻。

Vue 除了有我們先前介紹的{{ 雙花括號 }}之外，還有許多由v-為前綴的特殊屬性指令(Directives)，這些放在 HTML 標籤裡的屬性，就如同 HTML 標籤裡一部分的屬性依ㄧ樣，這些指令會因表達式的值改變時，也將會自動的響應在 DOM 上，而改變屬性與 DOM 的渲染。

官方對於指令(Directives)的寫法是：「指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。」

我們先來看看ㄧ部分常用的指令(Directives)，接下來會透過範例一一介紹這些指令的用法。

v-text

v-text的主要用途是在 html 的標籤裡設定這個標籤的文字內容(textContent)。雖然很方便使用，但缺點是，無論標籤裡有無內容，一律都會被v-text替換掉。他雖然也可寫表達式，但默認的寫法還是會替換掉標籤內的「所有」內容。

如果想在標籤裡隨意加上內容，可使用插值表達式的雙花括號{{ message}}，因為如果內容有變更，也只有雙花括號裡的內容會被替換，使用上會比較靈活。雙花括號也可加入邏輯，例如拼接{{ message + "in" +city}}。

在底下的範例裡，如果我們使用v-text來綁定<h2>標籤的內容，會發現<h2 v-text="message">XXX</h2>裡的xxx內容會被覆蓋掉，而只顯示相對應的message Bonjour。

<div id="app">
<h2 v-text="message">XXX</h2>
<h2> Tracy say: {{ message }}
</div>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Bonjour',
    city: 'Paris',
  },
});

v-html

v-html用來設定如同標籤的innerHTML，專門用來在網頁中加入 html 結構內容，例如想在<p>放入一個連結，必須是 HTML 語法，就可以使用 v-html 輕鬆辦到。也就是說使用v-html時會自動被解析成 HTML 標籤，和v-text和v-html不同的是v-text只會被解析成純文字。

<div id="app">
  <p v-html="content"></p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    content: '<a href="#"> Paris</a>',
  },
});

v-on

為元素綁定事件，並且可以以@替代v-on:，所綁定的方法需要定義在methods屬性中，在方法裡要取得Data裡的資料需使用this各個關鍵字取得。

在觸發的元素上加上觸發方式和綁定的方法：
<input type="button" value="事件綁定" v-on:觸發事件名稱="方法" />
這些觸發事件的方法有許多種，但是和原生的 JS 寫法不同，例如原本的onclick 寫成click，因為在v-on的指令已經有on，所以只要將原生名稱去掉on就可以囉。

<div id="app">
  <!-- 點擊 -->
  <input type="button" value="showAlert" v-on:click="方法" />
  <!-- 滑鼠移至元素上方 -->
  <input type="button" value="showAlert" v-on:mouseover="方法" />
  <!-- 點擊兩次 -->
  <input type="button" value="showAlert" v-on:dblclick="方法" />
  <input type="button" value="showAlert" @click="方法" />
  <h3 @click="addName">Je suis {{name}}</h3>
</div>

const app = new Vue({
  el: '#app',
  data: {
    name: 'Tracy',
    content: '<a href="#"> Paris</a>',
  },
  methods: {
    showAlert: function () {
      return alert('Bonjour !');
    },
    showMsg: function () {
      // let msg = this.message
      // console.log(msg)
      return alert(this.message);
    },
    addName: function () {
      // 還會連帶改變原本的name...
      this.name += 'et moi';
    },
  },
});

參考：
模板語法 — Vue.js 指令

每日一句法文有益身心：À bientôt ! 啊.ㄅㄧㄤ ˋ.兜！ 下次(很快)見！