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

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 - 中间滚轮事件

posted on 2022-05-31 21:53 运维开发玄德公阅读(117) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue.js基础-07-绑定事件（v-on）-02-键盘事件（keyup）

· Vue.js基础-10-监听子组件事件（v-on）、绑定子组件数据（v-model）

· vue(vue.js)中的click事件及常见的事件修饰符

· vue-事件修饰符

· Vue09 事件

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

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 鼠标的修饰符

导航

统计

合集

	<!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>

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

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

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

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