小白学习Vue（3）上午

最新推荐文章于 2022-08-01 09:33:37 发布

不是，你来真的啊？

最新推荐文章于 2022-08-01 09:33:37 发布

阅读量131

点赞数

分类专栏：前端基础· 文章标签：自学

本文链接：https://blog.csdn.net/weixin_43724848/article/details/104144085

版权

基础· 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

前端

24 篇文章 0 订阅

订阅专栏

一.介绍

今天看了一眼肺炎的增长速度，还是真的好快啊，但愿能够快点好起来，要不然我可能连学都上不了了！！！

还是继续早晨学习一下Vue的一小部分

二.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>day03</title>
		<script src="./lib/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.inner{
				height: 150px;
				background-color: darkcyan;
			}
		</style>
	
	
	</head>
	<body>
		
		<div id="app"> 
			<!-- <p>{{msg}}</p> -->
			<!-- <div class="inner" @click="divclick"> -->
				<!-- 使用.stop阻止冒泡 -->
				<!-- 阻止了所有的冒泡行为 -->
				<!-- <input type="button" value="点击" @click.stop="btnhandle" /> -->
			<!-- </div> -->
			
			<!-- 使用.prevent 阻止默认行为 -->
			<!-- <a href="http://www.baidu.com" @click.prevent="linkclick">百度一下你就知道</a> -->
		
			<!-- 使用 .capture 实现捕获触发机制 -->
			<!-- <div class="inner" @click.capture="divclick">
				<input type="button" value="点击" @click.stop="btnhandle" />
			</div> -->
		
			<!-- 使用.self 实现只有点击当前元素的时候，才会触发事件处理函数 -->
			<!-- <div class="inner" @click.self="divclick">
				<input type="button" value="点击" @click.stop="btnhandle" />
			</div> -->
			
			<!-- 使用.once 只触发一次事件处理函数 -->
			<!-- <a href="http://www.baidu.com" @click.prevent.once="linkclick">百度一下你就知道</a> -->
			
			<!-- .self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为 -->
		</div>
		<script>

			var vm  =new Vue({
				el:'#app',
				data:{
					msg:'欢迎学习vue'
					
				},
				methods:{
					divclick(){
						console.log('div大!')
						// console.log('触发了div点击事件');
					},
					btnhandle(){
						console.log('触发了button点击事件')
					},
					linkclick(){
						console.log('link触发');
					}
				}
			})
			
		</script>
	</body>
</html>

三.代码分析

.stop是阻止冒泡行为的发生的，是阻止所有的冒泡行为的
.prevent用来阻止默认行为
.self只可以触发当前元素
.once是事件处理函数只触发一次
.capture是捕获触发机制的
在self和stop之中是有一定的区别的，self只会阻止自身冒泡行为的触发，并不会真正的去阻止冒泡的行为

不是，你来真的啊？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白学习Vue（3）上午

一.介绍今天看了一眼肺炎的增长速度，还是真的好快啊，但愿能够快点好起来，要不然我可能连学都上不了了！！！还是继续早晨学习一下Vue的一小部分二.代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>day03</title> ...
复制链接

扫一扫