Vue 資料與畫面同步的概念很簡單。

1. data 更新、UI隨之更新；
2. 反過來，使用者輸入更改UI上的數值， data 得跟著更新。

回顧前面介紹過的兩種 directive
v-bind 做 單向綁定，可以達成 1
v-model 做 雙向綁定，可以達成 1 & 2

我們知道使用者操作，不見得是輸入新的數值，有時會點擊(Click)按鈕、送出(Submit)表單資訊，或是觸發其他已經學過的 DOM 事件。

相較前兩者用來監聽資料異動 ，
Vue 拿 v-on 用來補足缺少的拼圖 - 監聽事件

暖暖身，例如想知道使用者按了幾次按鈕

<div id="clickEventDemo">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#clickEventDemo',
  data: {
    counter: 0
  }
});

在按鈕上綁定 Click 事件，每次觸發多算一次。

事件處理器若是長了一點，找個地方收好，對眼睛也舒服。

<div id="clickEventDemo">
  <button v-on:click="countUserClick">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#clickEventDemo',
  data: {
    counter: 0
  },
  method: {
  	 countUserClick: function() {
  	 	this.counter += 1;
  	 	console.info('Count: ${ counter }');
  	 }
  }
});

若是事件處理器有不同的參數

<div id="clickEventDemo-2">
  <button v-on:click="say('hi')">Hi</button>
  <button v-on:click="say('hello')">Hello</button>
</div>

var example1 = new Vue({
  el: '#clickEventDemo-2',
  method: {
  	 say: function(msg) {
  	 	alert(msg);
  	 }
  }
});

還是需要避開預設行為

<div id="clickEventDemo-2">
  <button v-on:click="say('hi', $event)">Hi</button>
  <button v-on:click="say('hello', $event)">Hello</button>
</div>

var example1 = new Vue({
  el: '#clickEventDemo-2',
  method: {
  	 say: function(msg, evt) {
  	 	<!-- 老朋友 -->
  	 	if (evt) evt.preventDefault();
  	 	alert(msg);
  	 }
  }
});