1.绑定监听
- v-on:xxx="fun"
- @xxx="fun"
- @xxx="fun(参数)"
- 默认事件形参: event
- 隐含属性对象: $event
2.事件修饰符
- .prevent : 阻止事件的默认行为 event.preventDefault()
- .stop : 停止事件冒泡 event.stopPropagation()
3.按键修饰符
- .keycode : 操作的是某个 keycode 值的键
- .keyName : 操作的某个按键名的键
4. 编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-事件处理</title>
</head>
<body>
<div id="app-8">
<h2>1、绑定监听</h2>
<button v-on:click="test1">Hello one</button>
<button @click="test1">Hello two</button>
<button @click="test2($event, 'hello')">Hello three</button>
<h2>2、事件修饰符</h2>
<!-- 阻止事件的默认行为 添加这个 prevent-->
<a href="http://www.baidu.com" @click.prevent="test3">百度一下</a><br><br><br>
<!-- 停止事件冒泡 stop-->
<div style="width: 200px;height: 200px;background: red" @click="test4">
<div style="width: 100px;height: 100px;background: green" @click.stop="test5"></div>
</div>
<h2>3、按键修饰符</h2>
<input @keyup.13="test6"><br><!--13代表enter键-->
<input @keyup.enter="test6">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app-8',
data: {
},
methods: {
//event: 默然事件形参
test1(event) {
console.log(event);
console.log(event.target.innerHTML);
alert(event.target.innerHTML)
},
test2(event, msg) {
alert(event.target.innerHTML + '----' + msg)
},
test3() {
alert('阻止事件的默认行为测试')
},
test4() {
alert('外部')
},
test5() {
alert('内部')
},
test6(event) {
alert(event.keyCode + '----' + event.target.value)
}
}
});
</script>
</body>
</html>
评论