vue中的事件处理

小河呀

于 2024-08-28 11:43:01 发布

阅读量323

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yizhihuifeidezhu/article/details/141531037

版权

事件的基本使用：

1.使用v-on: xxx 或者@xxx 绑定事件，其中xxx是事件名：
2.事件的回调需要配置在methods对象中，最终会在vm上
3. methods中配置的函数，不要用箭头函数！否则this就会指向window而不是vm
4. methods中配置的函数，都是被Vue所管理的函数。this的指向是vm 或 组件实例对象
5. @click=“demo” 和 @click=“demo($event)” 的效果一样，但后者可以传参

Vue中的事件修饰符：

		**1.prevent：阻止默认事件
		2.stop：阻止事件冒泡
		3.once：事件只触发一次**
		4.capture：使用事件捕获模式
		5.self：只有event.target是当前操作的元素时才触发事件
		6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

1.prevent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>

<div id="root">
    <h2>{{name}}</h2>
<!--    1阻止默认事件-->
    <a href="https://www.baiodu.com" @click.prevent="showInfo">点击提升信息</a>
</div>
</body>
<script>
   new Vue({
        el:"#root",
        data:{
            name:"尚硅谷"
        },
        methods:{
            showInfo(){
                alert("同学你好")
            }
        }
    })

</script>
</html>

2.阻止事件冒泡stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>

<div id="root">
    <h2>{{name}}</h2>
<!--    1阻止默认事件-->
    <a href="https://www.baiodu.com" @click.prevent="showInfo">点击提升信息</a>
    <!-- 阻止事件冒泡-->
    <div class="demo1" @click="showInfo1">
        <button @click.stop="showInfo1">点击提示信息</button>
    </div>
</div>
</body>
<script>
   new Vue({
        el:"#root",
        data:{
            name:"尚硅谷"
        },
        methods:{
            showInfo(){
                alert("同学你好")
            },
            showInfo1(){
                alert("同学你好1")
            }
        }
    })

</script>
</html>

3.事件只触发一次

<button @click.once="showInfo">点我提示信息</button>

4.事件捕获

在vue中，事件捕获是事件传播的一个阶段，当一个时间触发时，它首先从最外层的元素开始箱内传播，这个过程就是捕获阶段。在vue中使用.capture修饰符来添加事件今天去，以捕获阶段触发事件。

  <div @click.capture="handleCaptureOutside">
    <!-- 外层div的点击事件会在内层div的点击事件之前被触发 -->
    <div @click="handleCaptureInside">
      <!-- 内层div的点击事件 -->
    </div>
  </div>

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

<div class="demo1" @click.self="showInof">
	<button @click="showInfo">点击提示信息</button>
	<div>

5.passive修饰符，事件的默认行为立即执行，无需等待事件回调执行完毕

应用场景：passive一般用于在滚动监听，@scoll,@touchmove。因为滚动监听过程中，移动办公每个像素都会产生一次事件，每次使用内核线程查询prevent会使滑动卡顿，我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。但passive和prevent冲突，不能绑在一个监听器上。

在这里插入图片描述