<!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">本场比赛得分： {{fenshu}} <br/><button v-on:click="jiafen">加分</button><button @click="jianfen">减分</button><br/><input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2"></div><script type="text/javascript">var app=new Vue({el:'#app',data:{fenshu:1,fenshu2:1},methods:{jiafen:function(){this.fenshu++;},jianfen:function(){this.fenshu--;},onEnter:function(){this.fenshu=this.fenshu+parseInt(this.fenshu2);}}})</script></body></html>
我们的v-on还有一种简单的写法，就是用@代替。
<button @click="jianfen">减分</button>
我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。
<input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2">
js:
onEnter:function(){this.fenshu=this.fenshu+parseInt(this.fenshu2);}
