绑定监听
- v-on:xxx=“fun”
- @xxx=“fun”
- @xxx=“fun(参数)”
- 默认事件形参: event
- 隐含属性对象: $event
事件修饰符
- .prevent : 阻止事件的默认行为 event.preventDefault()
- .stop : 停止事件冒泡 event.stopPropagation()
按键修饰符
- keycode : 操作的是某个 keycode 值的键
- .keyName : 操作的某个按键名的键(少部分)
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
</style>
<script src="/vue.min.js"></script>
<body>
<div id="demo">
<button @click="test1">test1</button>
<button @click="test2">test2</button>
<button @click="test3(123,$event)">test3</button>
<h2>事件修饰符</h2>
<div style="width: 200px;height: 200px;background: red" @click="test5">
<!-- 停止事件冒泡 -->
<div style="width: 100px;height: 100px;background: green" @click.stop="test6"></div>
</div>
<!-- 阻止事件的默认行为 prevent -->
<a href="https://www.baidu.com/" @click.prevent="test7">去百度,我就不去</a>
<h2>按键修饰符</h2>
<input type="text" @keyup.13="test8" />
<input type="text" @keyup.enter="test8" />
</div>
</body>
<script>
new Vue({
el:'#demo',
data:{
test1(){
alert("test1");
},
test2(){
alert("test2");
},
test3(num, $event){
alert(num + '---' + event.target.innerHTML);
},
test5(){
alert("out");
},
test6(){
//event.stopPropagation();
alert("inner");
},
test7(){
//event.preventDefault();
alert("success")
},
test8(event){
/* if(event.keyCode==13){
}*/
alert(event.target.value)
}
}
})
</script>
</html>