Vue教程----监听事件（2）

最新推荐文章于 2024-04-04 09:03:11 发布

Loyar

最新推荐文章于 2024-04-04 09:03:11 发布

阅读量695

点赞数 1

分类专栏：前端 Vue JS 文章标签： vue vue.js html

本文链接：https://blog.csdn.net/Loyar/article/details/118552709

版权

Vue 同时被 3 个专栏收录

4 篇文章 1 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

继续上一章节的冒泡逻辑，我们首先来看几个基本的事件修饰符

.stop 停止修饰符（中断冒泡）
.prevent 组织提交，在遇到form等表单提交后刷新页面时，阻止强制刷新页面
.capture 优先触发修饰符（出头鸟）
.self 自己才能出发，从子节点响应而来，遇到该函数不触发
.once 只响应一次，有且仅有一次
用@click为例:

@click.stop
@click.prevent
@click.self
@click.once

1：stop修饰符
我们在不加修饰符的情况下，可以看到，当我点击son以后，
所有的父级节点都可以执行到
在这里插入图片描述
然后我们在father这个节点加入一个.stop，再次点击son

在这里插入图片描述
可以看到只执行到添加了.stop修饰符的事件中就停止了，这就是.stop修饰符的作用

2:capture修饰符
capture的作用是，不论结构如何，只要是绑定的同一函数，优先响应的永远是含有capture修饰符的元素
PS:如果有一个以上的cpature修饰符，vue会按照前后添加的顺序进行优先响应，也就是先写capture的先执行

依然使用我们的冒泡代码
我们在father元素中事件中添加一个.capture运算符
在这里插入图片描述
效果：

3：self修饰符
作用：联动事件响应元素中，如果一个元素表明了该修饰符，则，不直接操作该元素无法间接触发该元素的响应事件，如果直接操作该元素，则除该元素子节点以外所有联动元素事件均生效并执行

看看代码案例
在这里插入图片描述
效果：

4：once修饰符
作用：声明了该修饰符的绑定函数，有且执行仅一次响应，联动响应中，如果操作该修饰符的子元素，首次正常执行，其次往后均跳过该修饰符修饰的元素响应，如果此时直接操作该元素，则会跳过该元素直接遍历其父级联动元素，如没有，则无效果。

代码：我们还是给father添加once修饰符
在这里插入图片描述
效果：

目前可以看到，结果和平时是没有区别的，此时我们操作第二次
在这里插入图片描述

可以看到多次执行后.once的修饰符修饰的元素不再继续响应了

5. prevent修饰符
作用：防止页面刷新，阻止页面刷新的方式每个前端组件各有不同，比如layui中可以通过Return False来方式页面刷新，而Vue中直接通过了元素内部的修饰就可以控制是否进行刷新响应，足以看出Vue再尽可能减少Dom操作成本上下了很大的功夫。

PS：只有强制执行刷新的控件装备该修饰符才有用，如果是通过事件进行location.reload()这种则不会生效的。
并且，跳转到任意页面后可以通过刷新来返回原页面

代码：
在这里插入图片描述

点击一般链接进行正常跳转

提示成功后确实通过相对路径进行跳转了

点击第二个链接
在这里插入图片描述
响应成功，但是并无跳转的效果

点击最后一个纯prevent的链接
在这里插入图片描述
已经无法响应了

以下是所有事件修饰符章节的源码：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="JS\vue.min.js"></script>
    <script src="JS\axios.min.js"></script>
    <title>冒泡反应修饰符功能</title>
    <style type="text/css">
      * {
        margin: 0 auto;
        text-align: center;
        line-height: 40px;
      }

      div {
        width: 300px;
        cursor: pointer;
      }

      #grandFather {
        background: orangered;
      }

      #father {
        background: yellowgreen;
      }

      #me {
        background: blueviolet;
      }

      #son {
        background: skyblue;
      }
    </style>
  </head>

  <body>
    <div id="div1">{{VueTest}}</div>
    <div id="content">
      <div id="grandFather" v-on:click="doc">
        grandFather
        <div id="father" v-on:click="doc">
          father
          <div id="me" v-on:click="doc">
            me
            <div id="son" v-on:click="doc">son</div>
          </div>
        </div>
      </div>
      <p>从前到后依次为响应顺序：<br />{{NextInfo}}</p>
    </div>
    <br />
    <br />
    <br />
    <div id="prevent">
      <a href="www.baidu.com" @click="locationFunc">一般的链接www.baidu.com</a>

      <br />

      <a href="www.baidu.com" @click.prevent="locationFunc"
        >prevent之后的链接 www.baidu.com</a
      >

      <br />

      <a href="www.baidu.com" @click.prevent
        >纯prevent之后的链接 www.baidu.com</a
      >
    </div>
  </body>
  <script>
    new Vue({
      el: "#div1",
      data: {
        VueTest: "Hello World!",
      },
      methods: {},
    });
    var content = new Vue({
      el: "#content",
      data: {
        id: "",
        NextInfo: "",
      },
      methods: {
        doc: function () {
          this.id = event.currentTarget.id;
          this.NextInfo += this.id + "  ";
        },
      },
    });

    new Vue({
      el: "#prevent",
      data: {},
      methods: {
        locationFunc: function () {
          alert("成功跳转");
        },
      },
    });
  </script>
</html>

本次章节就到此为止了，接下来就改进入Vue的条件语句学习了

Loyar

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue教程----监听事件（2）

继续上一章节的冒泡逻辑，我们首先来看几个基本的事件修饰符.stop 停止修饰符（中断冒泡）.prevent 组织提交，在遇到form等表单提交后刷新页面时，阻止强制刷新页面.capture 优先触发修饰符（出头鸟）.self 自己才能出发，从子节点响应而来，遇到该函数不触发.once 只响应一次，有且仅有一次用@click为例:@click.stop@click.prevent@click.self@click.once1：stop修饰符我们在不加修饰符的情
复制链接

扫一扫