### 使用绑定事件监听器，编写一个加分减分的程序。
`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()函数进行整数转换。
