Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）

玄德公笔记

已于 2022-11-19 00:06:12 修改

阅读量5.9k

点赞数

分类专栏： # vue框架学习文章标签： vue.js javascript 点击事件 click v-on

于 2022-05-31 21:52:44 首次发布

本文链接：https://blog.csdn.net/xingzuo_1840/article/details/124783094

版权

vue框架学习专栏收录该内容

19 篇文章 5 订阅

订阅专栏

1. 点击事件参数（click）

1.1 基本使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CROW-宋</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <button v-on:click="counter += 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          counter: 0,
        },
      });
    </script>
  </body>
</html>

结果显示

按钮每点击依次计数 +1

在这里插入图片描述

1.2 绑定一个方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CROW-宋</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- `greet` 是在下面定义的方法名 -->
      <button v-on:click="greet">Greet</button>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          name: "Vue.js",
        },
        // 在 `methods` 对象中定义方法
        methods: {
          greet: function (event) {
            alert("Hello " + this.name + "!");
            if (event) {
              alert(event.target.tagName);
            }
          },
        },
      });
      // 也可以用 JavaScript 直接调用方法
      app.greet(); // -> 'Hello Vue.js!'
    </script>
  </body>
</html>

结果显示
点击按钮弹窗

在这里插入图片描述

点击确定弹窗

在这里插入图片描述

1.3 冒泡事件

说明

下层发生的事件，会冒泡到上一层。

示例

代码说明：

我们对按钮的点击事件绑定了 greet02（将弹出一个 hello 02 的弹窗）
在它的上层 div 绑定了 greet01（将弹出一个 hello 01 的弹窗）
当点击按钮事件被触发后，这个事件会冒泡（即被传递到按钮的上层）

因此我们预计，弹窗 hello 02 确认后，将会弹出弹窗hello 01

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CROW-宋</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app" v-on:click="greet01">
      <button v-on:click="greet02">Greet</button>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          name: "Vue.js",
        },

        methods: {
          greet01: function (event) {
            alert("Hello 01");
          },
          greet02: function (event) {
            alert("Hello 02");
          },
        },
      });
      // 也可以用 JavaScript 直接调用方法
      app.greet(); // -> 'Hello Vue.js!'
    </script>
  </body>
</html>

点击按钮

在这里插入图片描述

确认后二次弹窗

在这里插入图片描述

2. 点击事件修饰符

2.1 .stop （阻止冒泡）

使用说明

添加该修饰符后，事件不会冒泡到上一层。

使用示例

代码

我们将冒泡事件中的代码做如下修改（在button的事件参数后加stop修饰符）

    <div id="app" v-on:click="greet01">
      <button v-on:click.stop="greet02">Greet</button>
    </div>

结果显示
点击按钮后，弹出Hello 01弹窗
确认后不会再弹出Hello 02

2.2 capture （捕获冒泡）

使用说明

冒泡的例子中我们可以看到：

先执行了按钮绑定的函数
随着事件冒泡到上一层才执行了上一层绑定的函数

而 capture参数将优先执行它所在的绑定。

使用示例

我们将冒泡示例中，按钮上层的 div 模块绑定参数加.capture修饰符。
我们预期，将看到点击按钮后，先弹窗Hello 01，再显示弹窗 Hello 02

    <div id="app" v-on:click.capture="greet01">
      <button v-on:click="greet02">Greet</button>
    </div>

2.3 .self （只监听触发该元素的事件）

使用说明

只监听触发该元素的事件。
即，如果事件冒泡到了该层，是不会被监听的

使用示例

如上边的冒泡示例中，如果我们在button的上层事件参数添加了.self修饰符。我们点击button，事件即使冒泡到div层也不会被监听。
代码修改如下：

    <div id="app" v-on:click.self="greet01">
      <button v-on:click="greet02">Greet</button>
    </div>

结果显示
点击按钮后，只有弹窗 Hello 02弹窗（确认后不会弹出Hello 02）

2.4 once （事件只触发一次）

使用说明

修饰的事件参数只会触发一次。

使用示例

将冒泡示例中的代码做如下修改

    <div id="app" v-on:click="greet01">
      <button v-on:click.once="greet02">Greet</button>
    </div>

预期：

第一次点击button，弹窗Hello 02弹出，确认后弹出Hello 01
以后点击，只有Hello 01会弹出。

结果显示
符合预期。

2.5 鼠标的修饰符

.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

玄德公笔记

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）

1. 点击事件参数（click）1.1 基本使用1.2 绑定一个方法1.3 冒泡事件说明示例2. 点击事件修饰符2.1 .stop （阻止冒泡）使用说明使用示例2.2 capture （捕获冒泡）使用说明使用示例2.3 .self （只监听触发该元素的事件）使用说明使用示例2.4 once （事件只触发一次）使用说明使用示例2.5 鼠标的修饰符......
复制链接

扫一扫