vue系列文章（3）：事件修饰符

最新推荐文章于 2024-05-22 16:40:45 发布

互联网极客

最新推荐文章于 2024-05-22 16:40:45 发布

阅读量332

点赞数

分类专栏： ----前端开发

本文链接：https://blog.csdn.net/jsqfengbao/article/details/94740046

版权

----前端开发专栏收录该内容

32 篇文章 3 订阅

订阅专栏

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

<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>   <div v-on:click.self="doThat">...</div>

例子：

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	
</head>
<body>
	<div id="app">
		<h1>事件修饰符</h1>
		<button @click.once="add(1)">涨一岁</button> <!--只执行一次-->
		<p>my age is {{age}}</p>
		<div id="canvas" v-on:mousemove="updateXY"> <!--鼠标移动事件-->
			{{x}},{{y}} -
			<span v-on:mousemove.stop="">stop moving</span> <!--阻止单击事件继续传播 -->
		</div>
		<a href="http://www.baidu.com/" v-on:click.prevent="alert()">baidu</a>
	</div>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

new Vue({
	el: '#app',
	data: {
		age: 30,
		x: 0,
		y: 0
	},
	methods: {
		add: function (inc) {
			this.age += inc;
		},
		substract: function (dec) {
			this.age -= dec;
		},
		updateXY: function(event){
			// console.log(event);
			this.x = event.offsetX;
			this.y = event.offsetY;
		},
		stopmoving: function(event) {
			event.stopPropaggation();
		},
		alert: function() {
			alert("hello world！");
		}
	}
});

Vue系列文章目录

如果上面文章对你有用，打赏下我吧@*@

互联网极客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue系列文章（3）：事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。<!-- 阻止单击事件继续传播 ...
复制链接

扫一扫