VUE事件修饰符

最新推荐文章于 2024-09-13 14:34:15 发布

这个昵称中不中

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量25

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45089331/article/details/134974541

版权

文章目录

prevent（阻止默认事件）

描述

阻止a标签本身的跳转功能

示例代码

<html>
   <head>
      <title>在线编辑器</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
   </head>
   <body>
      <div id = "el" style = "text-align:center;">
        <a href='https://www.baidu.com' @click.prevent = ''>添加prevent</a>
		  <hr/>
		  <a href='https://www.baidu.com' @click = ''>未添加prevent</a>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#el',
            data: {
               message: ''
            }
         });
      </script>
   </body>
</html>

stop（阻止事件冒泡）

描述

阻止stop所标注标签的外层标签事件的执行，可阻止多个外层标签内容

实例代码

<html>
   <head>
      <title>在线编辑器</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
   </head>
   <body>
      <div id = "demo" style = "text-align:center;">
		  <div @click = "showDivInfo">
			  <button @click.stop = "showButInfo">stop事件</button>
		  </div>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#demo',
            data: {
               message: '我的第一个VueJS任务'
            },
			 methods:{
			 	showDivInfo(){
					alert('Div事件!')
				},
				showButInfo(){
					alert('Button事件!')
				}
			 }
         });
      </script>
   </body>
</html>

once（事件只触发一次）

实例代码

<html>
   <head>
      <title>在线编辑器</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
		 <button @click.once = 'showInfo'>事件只触发一次</button>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'message'
            },
			 methods:{
			 	showInfo(){
					alert('已触发!')
				}
			 }
         });
      </script>
   </body>
</html>

capture （使用事件的捕获模式）

描述

如果不使用事件的捕获模式，执行顺序为执行box2的点击事件，再执行box1的点击事件。

若使用了该模式，则执行顺序为先执行box1再执行box2

实例代码

<html>
   <head>
      <title>在线编辑器</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
	  <style>
	    .box1{
				padding: 20px;
				height:100px;
				width:200px;
				background-color: black;
			}
			.box2{
				padding: 20px;
				height:60px;
				width:160px;
				background-color: orange;
			}
	   </style>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
		  <h1>使用了事件的捕获模式</h1>
		 <div class = 'box1' @click.capture = "showBox1">
			<div class = 'box2' @click = "showBox2">
			</div>
		 </div>
		   <h1>没有使用事件的捕获模式</h1>
		 <div class = 'box1' @click = "showBox1">
			<div class = 'box2' @click = "showBox2">
			</div>
		 </div>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'message'
            },
			 methods:{
			 	showBox1(){
					console.log('执行外层事件')
				},
				 showBox2(){
					console.log('执行内层事件')
				}
			 }
         });
      </script>
   </body>
</html>

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

描述

未使用该事件时，点击button后会先弹出Button事件，再弹出Div事件

使用事件后，点击button，仅弹出Button事件，当你点击Div 才会弹出Div事件

实例代码

<html>
   <head>
      <title>在线编辑器</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
   </head>
   <body>
      <div id = "demo" style = "text-align:center;">
		  <div @click = "showDivInfo" style = "background-color: orange;">
			  <button @click = "showButInfo">未加self后</button>
		  </div>
		  <hr/>
		  <div @click.self = "showDivInfo" style = "background-color: orange;">
			  <button @click = "showButInfo">加了self后</button>
		  </div>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#demo',
            data: {
               message: '我的第一个VueJS任务'
            },
			 methods:{
			 	showDivInfo(){
					alert('Div事件!')
				},
				showButInfo(){
					alert('Button事件!')
				}
			 }
         });
      </script>
   </body>
</html>

passive（事件的默认行为立即执行，无需等待事件回调执行完毕）

描述

主要用于优化浏览器的滚动性能

实例代码

<html>
   <head>
      <title>在线编辑器</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
	   <style>
	   .list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
	   </style>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
		 <ul @scroll.passive="demo" class="list">
				<li>加了 passive</li>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
			
			<ul @scroll="demo" class="list">
				<li>未加 passive</li>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'message'
            },
			 methods:{
			 	demo(){
					for (let i = 0; i < 20000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			 }
         });
      </script>
   </body>
</html>

  el: '#intro',
        data: {
           message: 'message'
        },
		 methods:{
		 	demo(){
				for (let i = 0; i < 20000; i++) {
					console.log('#')
				}
				console.log('累坏了')
			}
		 }
     });
  </script>

```