1.Vue如何处理事件？
-
v-on 指令用法
<input type = 'button' v-on:click = 'num++'/>
-
v-on 简写形式
<input type = 'button' @click = 'num++'/>
2.事件函数的调用方式
-
直接绑定函数名称
<button v-on:click='say'>Hello</button>
-
调用函数
<button v-on:click='say()'>Say hi</button>
3.事件函数参数传递
-
普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
如果事件绑定函数调用，那么事件对象必须作为最后一个参数传递，并且事件对象的名称必须是$event。
4.事件修饰符
-
.stop 阻止冒泡
<a v-on:click.stop="handle">跳转</a>
-
.prevent 阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
5.按键修饰符
-
.enter 回车键
<input v-on:keyup.enter='submit'>
-
.delete 删除键
<input v-on:keyup.delete ='handle'>
6.自定义按键修饰符
-
全局config.keyCodes对象，如：
Vue.config.keyCodes.f1 = 113
<div id="app">
<input type="text" v-on:keyup.aaa='handle' v-model='info'>
</div>
<script type="text/javascript">
/*
事件绑定-自定义按键修饰符
规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
*/
Vue.config.keyCodes.aaa = 113 // 113是F2的键码
var vm = new Vue({
el: '#app',
data: {
info: ''
},
methods: {
handle: function(event){
console.log(event.keyCode)
}
}
});
</script>
案例：简单计算器
①通过v-model指令实现数值a和数据b的绑定
②给计算按钮绑定事件，实现计算逻辑
③将计算结果绑定到对应位置
<div id="app">
<h1>简单计算器</h1>
<div>
<span>数值A：</span>
<span><input type="text" v-model="a"></span>
</div>
<div>
<span>数值B：</span>
<span><input type="text" v-model="b"></span>
</div>
<div>
<button v-on:click='handle'>计算</button>
</div>
<div>
<span>计算结果：</span>
<span v-text='result'></span>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handle: function () {
this.result = parseInt(this.a) + parseInt(this.b);
}
}
});
</script>