Vue2.0学习笔记v-on(5)

v-on:绑定事件监听
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
v-on可以绑定的事件有

image.png image.png
image.png

原生js的那些事件都可以绑定
一、写一个加分减分的监听事件

<div id="app">
   得分：{{number}}
    <input type="button" value="加分"v-on:click="add()">
    <input type="button" value="减分" v-on:click="sub()">
    <br>
    <input type="text" v-on:keyup.enter="onEnter" v-model="number2">
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
         number:0,
            number2:1
        },
        methods:{
            add:function(){
                this.number++
            },
            sub:function(){
                this.number--;
            },
            onEnter:function(){
               this.number= this.number+parseInt(this.number2)
            }
        }
    })
</script>

除了可以用

  <input type="button" value="加分"v-on:click="add()">
还可以简写
<input type="button" value="加分" @click="add()">

  onEnter:function(){
               this.number= this.number+parseInt(this.number2)
            }

在onEnter函数中因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。不然就是字符串的连接了。

键盘事件：

image.png