Vue2事件修饰符

最新推荐文章于 2024-06-05 10:13:09 发布

木子李BLOG

最新推荐文章于 2024-06-05 10:13:09 发布

阅读量227

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sinat_29304113/article/details/121674026

版权

prevent:阻止默认事件（常用）

<div id="root">
	<!-- 阻止默认事件 -->
	<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
</div>
<script>
	const vm = new Vue({
		el:"#root",
		data(){
			return {
				name:"哈哈"
			}
		},
		methods: {
			showInfo(e){
			// e.preventDefault();
			},
		},
	})
</script>

stop:阻止事件冒泡

<div id="root">
	<div id="demo1" @click="show">
		<button @click.stop="show">点我</button>
	</div>
</div>
<script>
	const vm = new Vue({
		el:"#root",
		methods: {
			show(e){
				// e.stopPropagation();// 阻止
				alert("点我")
			},
		},
	})
</script>

once:事件只触发一次

capture:使用事件的捕获模式

先捕获后冒泡

 <div id="root">
   <div class="box1" @click.capture="show(1)">123
       <div class="box2"  @click="show(2)">456</div>
   </div>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        methods: {
            show(param){
               alert(param)
            },
        },
    })
</script>

self:只有event.target是当前操作的元素时才触发事件

<div id="root">
	<div class="box1" @click.self="show">123
		<div class="box2"  @click="show">456</div>
	</div>
</div>
<script>
	const vm = new Vue({
		el:"#root",
		methods: {
			show(param){
				console.log(param);
			},
		},
	})
</script>

passive:事件的默认行为立即执行，无需等待事件回调执行完毕（多用于移动端手机或Pad）

@scroll 滚动条滚动时调用
@wheel 鼠标滚轮滚动时调用（滚轮执行后滚动条才会动）

 <style>
	.container{
		width: 500px;
		height: 500px;
		overflow: auto;
	}
	.container li{
		height: 100px;
	}
</style>
<div id="root">
	<div class="container" @wheel.passive="show">
		<ul>
			<li>这是内容</li>
			<li>这是内容</li>
			<li>这是内容</li>
			<li>这是内容</li>
			<li>这是内容</li>
			<li>这是内容</li>
			<li>这是内容</li>
			<li>这是内容</li>
			<li>这是内容</li>
			<li>这是内容</li>
		</ul>
	</div>
 </div>
<script>
	const vm = new Vue({
		el:"#root",
		methods: {
			show(){
				for(var i=0;i<10000;i++){
					console.log("#");
				}
				console.log("累坏了");
			},
		},
	})
</script>

native:在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触发的

<Student ref="child" @click.native="showCon"></Student>

修饰符可以多个一起使用

<div id="root">
	<div id="demo1" @click="show">
		<a href="http://www.baidu.com" @click.stop.prevent="show">点我</a>
	</div>
</div>