事件处理
关于Vue的事件处理机制,介绍一下三点,分别是:绑定监听,事件修饰符,按键修饰符。
1.绑定监听
最常见的事件绑定监听即v-on指令,写法为:v-on:xxx = ‘fun’,可简写为:@xxx = ‘fun’,其中fun中可以传递参数,写法为:@xxx = ‘fun(参数)’。对于每一个监听函数,都默认带有事件形参:event,即若定义的监听函数即使没有带参数,但是会默认有一个形参event,其隐含的属性对象为$event。具体为:
- v-on:xxx=“fun”
- @xxx=“fun”
- @xxx=“fun(参数)”
- 默认事件形参: event
- 隐含属性对象: $event
2.事件修饰符
对于事件修饰符,Vue分别使用了.prevent和.stop来简化了对于阻止事件的默认行为和停止事件冒泡事件的编码,即:
- .prevent : 阻止事件的默认行为 event.preventDefault()
- .stop : 停止事件冒泡 event.stopPropagation()
3.按键修饰符
对于按键修饰符,Vue也使用了更加简洁的写法,具体为:
- .keycode : 操作的是某个 keycode 值的键
- .keyName : 操作的某个按键名的键(少部分)
具体见代码为例进行说明:
<div id="app">
<h4>绑定监听</h4>
<button @click="test1">test1</button>
<button @click="test2('katle')">test2</button>
<button @click="test3">test3</button>
<button @click="test4('hahah',$event)">test4</button>
<!--
.stop:停止事件冒泡event.stopPropagation()
.prevent:阻止事件的默认行为event.preventDefault()
-->
<h4>事件修饰符</h4>
<div style="width:200px;height: 200px;background-color: yellow" @click="test5">
<div style="width:100px;height: 100px;background-color: green" @click.stop="test6"></div>
</div>
<a href="https://www.baidu.com/" @click.prevent="test7">百度一下</a>
<!--
.keyCode:操作的是某个keycode值的键
keyName:操作的是某个按键名的键(但只有少部分按键可以使用按键名来编码)
-->
<h4>按键修饰符</h4>
enter键:<input type="text" @keyup.enter="test8"> <br>
退格键:<input type="text" @keyup.8="test8">
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
var vue = new Vue({
el:'#app',
data:{},
methods:{
/*
* 默认事件形参:event
* 隐藏属性对象:$event
* */
test1(){
alert('test1')
},
test2(msg){
alert(msg + '+' + 'test2')
},
test3(event){
alert(event.target.innerHTML + '--kalte')
},
test4(msg,event){
alert(msg + '-' + event.target.innerHTML)
},
test5(){
alert('out')
},
test6(event){
//阻止事件冒泡
//event.stopPropagation()
alert('inner')
} ,
test7(event){
//event.preventDefault()
alert('已阻止默认行为')
},
test8(event){
/*if(event.keyCode === 13) {
alert(event.target.value + '-' + event.keyCode)
}*/
alert(event.target.value + '+' + event.keyCode)
}
}
})
</script>