vue 基础入门笔记 02:事件修饰符
392 / 0 / 创建于 4年前 /
September 的个人博客
Vue学习笔记2
-
事件修饰符
-
.stop 阻止冒泡
-
.prevent 阻止默认事件
-
.once 只执行一次
-
.self 只当事件在元素本身时触发
-
.capture 添加事件侦听器时使用事件捕获模式
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<div @click='divClickHandler' style="width: 200px;height:200px;background-color:red">
div
<!-- .stop 阻止冒泡 -->
<!-- 只执行btnClickHandler divClickHandler被阻止了 -->
<button @click.stop='btnClickHandler'>按钮</button>
</div>
<div @click='divClickHandler' style="width: 200px;height:200px;background-color:red">
div
<!-- 阻止默认事件 -->
<!-- href 跳转失效 -->
<a href="http://www.baidu.com" @click.prevent='linkClick'>百度</a>
</div>
<div @click.captrue='divClickHandler' style="width: 200px;height:200px;background-color:red">
div
<!-- 实现捕获触发事件机制 -->
<!-- 先执行divClickHandler 在执行btnClickHandler -->
<button @click='btnClickHandler'>按钮</button>
</div>
<!-- 只执行一次 -->
<a href="http://www.baidu.com" @click.prevent.once='linkClick'>百度</a>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
\
},
methods: {
// div点击事件
divClickHandler(){
console.log('点击了div')
},
// 按钮点击事件
btnClickHandler(){
console.log('点击了btn')
},
//阻止默认事件
linkClick(){
console.log("link click")
}
},
})
</script>
</body>
</html>
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：