### 使用綁定事件監聽器，編寫一個加分減分的程序。
`v-on` 就是監聽事件，可以用`v-on`指令監聽 DOM 事件來觸發一些 javascript 代碼。
程序代碼
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-on事件監聽器</title>
</head>
<body>
<h1>v-on 事件監聽器</h1>
<hr>
<div id="app">
本場比賽得分： {{count}}<br/>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">減分</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
count:1
},
methods:{
jiafen:function(){
this.count++;
},
jianfen:function(){
this.count--;
}
}
})
</script>
</body>
</html>
~~~
我們的v-on 還有一種簡單的寫法，就是用@代替。
~~~html
<button @click="jianfen">減分</button>
~~~
我們除了綁定click之外，我們還可以綁定其它事件，比如鍵盤回車事件v-on:keyup.enter,現在我們增加一個輸入框，然后綁定回車事件，回車后把文本框里的值加到我們的count上。
**綁定事件寫法：**
~~~html
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
~~~
**javascript代碼：**
~~~javascript
onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}
~~~
> 因為文本框的數字會默認轉變成字符串，所以我們需要用parseInt()函數進行整數轉換。
