首先,需要明确的是Vue中的 $event类似于原生js的事件对象e,$event是指当前触发的是什么事件(鼠标事件,键盘事件等)
Vue中关于函数的调用有两种,一种是直接写函数名的方式,一种是函数名()的形式,直接写函数名的形式默认携带这一个事件对象,函数名小括号的形式如果要携带参数,那么这个事件对象一定要写在所有参数名的最后.
<div id="app">
<div v-cloak>{{num}}</div>
<input type="text" @blur='handle1($event)'>
</div>
<script src="../vue.js"></script>
<script>
//创建Vue实例
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function (event) {
// console.log(event.target.value);
//这里的input框失去焦点可以在vue事例中的方法中定义的函数的形参event得 到,
并通过event.target.value获取最新输入的值
注意:通过event.target.value获得的值是一个字符串需要转换为数字进行计算
this.num += parseInt(event.target.value)
},
}
});
<input type="text" @blur='handle1($event)'>
<div id="app">
<div v-cloak>{{num}}</div>
<button @click='handle($event)'>点击</button>
</div>
<button @click='handle($event)'>点击</button>
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function (event) {
console.log(event.target);//<button>点击</button>
//event.target打印的结果就是触发该事件的本身元素
this.num += 1
}
}
});