前面有提到屬性綁定，在這裡我來介紹事件綁定及資料綁定，就讓我們開始吧！

事件綁定 v-on

在網頁上，常常會有點擊、輸入資料等的互動事件，而如果你對 JavaScript 及 jQuery 熟悉的話，那應該知道他們是如何取得 DOM 並加上事件。

/* JavaScript 取得 DOM */
var btn = document.querySelector('#btn');
btn.addEventListener('click', event, false)

/* jQuery 取得 DOM */
$('#id').click(event);

在 Vue 裡的 onclick 事件則是這麼寫的，先給按鈕綁定一個點擊事件：

<div id="app">
    <button v-on:click="logOut">click</button>
</div>

接下來在 Vue 的應用程式內建立方法 methods，並將點擊要觸發的事件建立在 methods 內，如下：

new Vue({
  el: '#app',
  data: {},
  methods: {
      logOut () {
        console.log('觸發點擊事件')
      }
  }
})

當點擊按鈕的時候就會觸發 logOut 這個方法，打開 console ( Chrome 的 F12 ) 看看如果有出現 "觸發點擊事件" 的字串，就代表成功囉！

縮寫

當然，v-on 也是有縮寫的囉！直接看看範例吧！

<!— 完整語法 -->
<div id="app">
    <button id="btn" v-on:click="logOut">click</button>
</div>

<!— 縮寫 -->
<div id="app">
    <button @click="logOut">click</button>
</div>

只要將前面的 v-on: 改為 @ 就行囉！是不是又提高了撰寫的效率呢！

資料綁定 v-model

在 Vue 之中，我們可以利用 v-model 來作資料的綁定，我們直接先來看範例：

<div id="app">
  <input type="text" v-model="msg">
  <h2> {{msg}} </h2>
</div>

new Vue({
  el: '#app',
  data: {
      msg: 'Hello Vue!'
  }
})

從上面我們可以看到， input 的輸入框已經和 Vue 應用程式裡 data 的資料作綁定，但是在上面還有另一個重點，也是 Vue 中相當重要的概念之一，就是雙向綁定，如果在輸入框輸入內容，下方的 h2 內容也會即時更新，因為他們兩者都和 data 內的 msg 綁定了，這就是雙向綁定。

那麼，明天再見囉！