<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="example">
<h2>1. 绑定监听</h2>
<button @click="test1">陕西</button>
<button @click="test2('西安')">西安</button>
<button @click="test3('luckxinxin', $event)">luckxinxin</button>
<h2>2. 事件修饰符</h2>
<a href="https://blog.csdn.net/LuckXinXin" @click.prevent="test4">去首页</a>
<div style="width: 200px; height: 200px; background: skyblue" @click="test5">
<div style="width: 100px; height: 100px; background: pink" @click.stop="test6"></div>
</div>
<h2>3. 按键修饰符</h2>
<input type="text" v-model="msg" @keyup.enter="test7">
</div>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
msg: ''
},
methods: {
test1 (event) {
alert(event.target.innerHTML)
},
test2 (msg) {
alert(msg)
},
test3 (msg, event) {
alert(msg + '---' + event.target.innerText)
},
test4 (event) {
alert('点击了')
},
test5 () {
alert('外部')
},
test6 (event) {
alert('内部')
},
test7 (event) {
alert(this.msg)
}
}
})
</script>
</body>
运行结果:
大家可以自己尝试运行一下