Vue之事件与属性

最新推荐文章于 2024-04-23 09:40:10 发布

shelly小鱼呀

最新推荐文章于 2024-04-23 09:40:10 发布

阅读量201

点赞数 2

分类专栏： Vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/yuishelly/article/details/129042942

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、事件和属性

1、事件

1.1 事件简写

v-on:click=“”
简写方式@click

1.2 事件对象$event

包含事件相关信息、如事件源、事件类型、偏移量
target、type、offset

1.3 事件冒泡

阻止事件冒泡：
方式一：原生js方式，依赖于事件对象（e.stopPropagation()）

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">事件冒泡</h1>
		</header>
		<div class="mui-content" id="content">
			<div @click="printf()">
				<div @click="print()">
					<div @click="show($event)">click me</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					printf:function(){
						console.log("printf")
					},
					print:function(){
						console.log("print")
					},
					show:function(e){
						console.log("show");
						console.log(e.target.innerHTML);//DOM对象
						e.stopPropagation();//阻止事件冒泡(原生js方式)
					}
				}
			})
			mui.init()
		</script>
	</body>

</html>

方式二：Vue方式，不依赖于事件对象
使用 @click.stop

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">事件冒泡</h1>
		</header>
		<div class="mui-content" id="content">
			<div @click="printf()">
				<div @click="print()">
					<div @click.stop="show()">click me</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					printf:function(){
						console.log("printf")
					},
					print:function(){
						console.log("print")
					},
					show:function(){
						console.log("show")
					}
				}
			})
			mui.init()
		</script>
	</body>

</html>

1.4 事件默认行为

a) 原生js方式（e.preventDefault()）

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">阻止默认事件</h1>
		</header>
		<div class="mui-content" id="content">
			<a href="#" @click="lianjie($event)">我是一个链接，点我</a>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					lianjie:function(e){
						console.log("lianjie");
						e.preventDefault();//阻止默认事件(原生js方式)
					}
				}
			})
			mui.init()
		</script>
	</body>

</html>

b) Vue方式
@click.prevent

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">阻止默认事件</h1>
		</header>
		<div class="mui-content" id="content">
			<a href="#" @click.prevent="lianjie()">我是一个链接，点我</a>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					lianjie:function(e){
						console.log("lianjie");
					}
				}
			})
			mui.init()
		</script>
	</body>

</html>

1.5 键盘事件

回车：@keydown.13 或 @keydown.enter
上：@keydown.38 或 @keydown.up

1.6 事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>