vue 02 事件处理

微信扫一扫,分享到朋友圈

vue 02 事件处理

1. 绑定监听

v-on:xxx=”fun”

@xxx=”fun”

@xxx=”fun(参数)”

默认事件形参: event

隐含属性对象: $event

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定监听</title>
</head>
<body>
<div id="demo">
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button>
<button @click="test3">test3</button>
<button @click="test4('abcd',$event)">test4</button>
</div>
<script type="text/javascript" src="https://www.tuicool.com/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {},
methods: {
test1() {//@xxx="fun"
alert('test1');
},
test2(msg) {// @xxx="fun(参数)"
alert(msg);
},
test3(event) {//默认事件形参: event
alert(event.target.innerHTML);
},
test4(msg, event) {//隐含属性对象: $event
alert(msg + '---' + event.target.textContent);
// alert(msg + '---' + event.target.innerHTML); 效果等同
}
}
})
</script>
</body>
</html>

结果:

2.事件修饰符

  • prevent阻止事件的默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符prevent</title>
</head>
<body>
<div id="demo">
<a href="http://www.baidu.com" @click.prevent="test1">百度一下</a>
</div>
<script type="text/javascript" src="https://www.tuicool.com/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {},
methods: {
test1() {
alert('点击了链接');
}
}
})
</script>
</body>
</html>

结果:正常情况下,点击了链接,会跳转到相应的地址。由于使用了prevent, 阻止了跳转链接的默认行为。

  • stop停止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符stop</title>
</head>
<body>
<div id="demo">
<div @click="test1">
<div @click.stop="test2"></div>
</div>
</div>
<script type="text/javascript" src="https://www.tuicool.com/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {},
methods: {
test1() {
alert('out');
},
test2() {
alert('inner');
}
}
})
</script>
</body>
</html>

结果: 如果不加stop, 则点击蓝色的框后,会alert inner 和out。如果加了stop, 则只会alert inner。

达摩院研发自动驾驶高精定位系统,无GPS信号也可实现厘米级定位

上一篇

containerd 启动报 `undefined symbol: seccomp_version` 错误的解决办法

下一篇

你也可能喜欢

vue 02 事件处理

长按储存图像,分享给朋友