实现的界面功能
点击两个按钮，点击键盘上的Enter键增加2分
键盘按键对应数值分布
v-on.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-on实例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
<h1>v-on实例啦</h1>
<hr>
<div id="app" >
<!-- 模板的输出方式，把message变量渲染到模板里 -->
本场比赛得分：{{fenshu}}
<!-- 添加两个按钮 -->
<p>
<button v-on:click='increase'>加分</button>
<button @click='decrease'>减分</button><br>
<!-- keyup.enter调用键盘事件；v-model绑定数据源 -->
<!-- 可以调用键盘码比如enter键盘就是13，将enter改为13即可 -->
<input type='text' v-on:keyup.13='onEnter' v-model='fenshu2'>
</p>
</div>
<script type='text/javascript'>
//声明变量且实例化(生成器)
var app =new Vue({
el:'#app',
data:{
fenshu:0,
fenshu2:2
},
methods:{
increase:function(){
this.fenshu++;
},
decrease:function(){
this.fenshu--;
},
onEnter:function(){
//parseInt将字符串类型转为int类型
this.fenshu=this.fenshu+parseInt(this.fenshu2)
}
}
})
</script>
</body>
</html>