黑马vue---13、事件修饰符的介绍
黑马vue---13、事件修饰符的介绍
一、总结
一句话总结：
.stop 阻止冒泡：input type="button" value="戳他" @click.stop="btnHandler"
.prevent 阻止默认事件
1、事件修饰符 使用实例？
直接接在事件后使用：input type="button" value="戳他" @click.stop="btnHandler"
2、.stop 和 .self 的区别？
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为
二、事件修饰符的介绍
1、事件修饰符：
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次
2、代码
<!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="./lib/vue-2.4.0.js"></script>
<style>
.inner {
height: 150px;
background-color: darkcyan;
} .outer {
padding: 40px;
background-color: red;
}
</style>
</head> <body>
<div id="app"> <!-- 使用 .stop 阻止冒泡 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> --> <!-- 使用 .prevent 阻止默认行为 -->
<!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> --> <!-- 使用 .capture 实现捕获触发事件的机制 -->
<!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> --> <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> --> <!-- 使用 .once 只触发一次事件处理函数 -->
<!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> --> <!-- 演示： .stop 和 .self 的区别 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div> --> <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div> --> </div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮 的点击事件')
},
linkClick() {
console.log('触发了连接的点击事件')
},
div2Handler() {
console.log('这是触发了 outer div 的点击事件')
}
}
});
</script>
</body> </html>
黑马vue---13、事件修饰符的介绍的更多相关文章
- Vue的事件修饰符
转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 027——VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...
- 第二章 Vue快速入门--12 事件修饰符的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 028——VUE中事件修饰符once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue2.0学习笔记：Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- 怎样在 Vue 中使用 事件修饰符 ?
Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...
随机推荐
- JavaScript函数式编程——柯里化
柯里化原理 如何实现柯里化 柯里化的应用 一.柯里化原理 柯里化:在数学和计算机科学中,柯里化是一种使用多个参数的一个函数转换成一系列使用一个参数的函数的技术. 前端使用柯里化的用途主要就应该是简化代 ...
- Delphi10.2.3利用THttpClient实现http异步下载
随着Delphi 10.2.3的发布,随之带来更稳定.更完善的版本.今天借官方的例子,解读一下如何实现Http异步下载并显示下载进度. 使用的核心组件是THttpClient,首先建立一个THttpC ...
- 怎么处理Win7系统备份还原提示代码0x80042302的错误？
我们都知道Win7系统自带备份还原功能,可以在电脑遇到小问题时通过还原至之前备份的正常系统来解决,非常的方便.但是有些用户在使用备份还原功能时,系统会提示0x80042302错误,这该怎么办呢?下面好 ...
- Web自动化测试中的接口测试
1.2.3 接口可测性分析 接口显而易见要比UI简单的都,只需要知道协议和参数即可完成一次请求,从自动化测试实施难易程度来看,有以下几个特征: 1)驱动执行接口的自动化成本不高:HTTP,RPC,SO ...
- 基于Linux解决登录ssh客户端失败问题—sshd error: could not load host key
当你ssh远程登录时,会发现ssh登录界面刚打开就会闪退,在查看主机日志消息中,就会看到如下错误: 然而问题的根源也就是这三个文件,无法正常加载ssh主机密钥. 而我们只需要将有问题的文件删除,然后重 ...
- django-spirt 论坛主题
官方文档 新建项目 django_sprit 文件夹 cd django_sprit pip install django-spirit spirit startproject mysite cd m ...
- OSG入坑之路[转]
转载自:https://segmentfault.com/a/1190000010506374?utm_source=tag-newest osg插件原理:https://blog.csdn.net/ ...
- Python——缓冲区
原创声明:本文系博主原创文章,转载及引用请注明出处. 1. 在Python中,字符串和整型对象都是不可变的(immutable)类型,因此Python会很高效地缓存它们. 2. Python2.3简单 ...
- JavaScript16进制颜色值和rgb的转换
//十六进制颜色值域RGB格式颜色值之间的相互转换//十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; /*RGB颜色转换为1 ...
- JAVA学习第三周
判断某个字符串是否为回文 时间2019年9月23日下午 这个题有很多种写法,其一是用String来存这个字符串,然后调用charAt函数进行字符串的遍历,从两头开始遍历是否相等 其二是用toCharA ...