1. 概述

老话说的好：努力帮别人解决难题，你的难题也就不难解决了。

言归正传，今天我们来聊聊 VUE3 的 click 事件的相关知识。

2. click 事件

2.1 实现数字递减

  1. <body>
  2.     <div id="myDiv"></div>
  3. </body>
  4. <script>
  5.     const app = Vue.createApp({     // 创建一个vue应用实例
  6.         data() {
  7.             return {
  8.                 num : 5
  9.             }
  10.         },
  11.         methods : {
  12.             decr() {
  13.                 if(this.num <= 0) {
  14.                     alert("库存为0，无法购买")
  15.                     return;
  16.                 }
  17.                 this.num-- ;
  18.             },
  19.         },
  20.         template : `
  21.             <div>
  22.                 商品库存剩余 {{num}} 件
  23.                 <button @click="decr">购买</button><br>
  24.             </div>
  25.         `
  26.     });
  27.  
  28.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

该例中，每点一次按钮，商品库存都会减 1

2.2 事件方法中获取 event 对象

  1.             decr(event) {
  2.                 console.info(event);
  3.                 console.info(event.target);
  4.                 if(this.num <= 0) {
  5.                     alert("库存为0，无法购买")
  6.                     return;
  7.                 }
  8.                 this.num-- ;
  9.             },

方法中可以获取 event 对象，从中可以获取一些事件信息

2.3 事件方法中增加参数

  1.         methods : {
  2.             decr(n) {
  3.                 if(this.num < 2) {
  4.                     alert("库存不足，无法购买")
  5.                     return;
  6.                 }
  7.                 this.num -= n;
  8.             },
  9.         },
  10.         template : `
  11.             <div>
  12.                 商品库存剩余 {{num}} 件
  13.                 <button @click="decr(2)">购买2件</button><br>
  14.             </div>
  15.         `

事件方法 decr 中增加了参数 n，依据参数进行计算

2.4 有参事件方法中获取 event 对象

  1.         methods : {
  2.             decr(n, event) {
  3.                 console.info(event);
  4.                 console.info(event.target);
  5.                 if(this.num < 2) {
  6.                     alert("库存不足，无法购买")
  7.                     return;
  8.                 }
  9.                 this.num -= n;
  10.             },
  11.         },
  12.         template : `
  13.             <div>
  14.                 商品库存剩余 {{num}} 件
  15.                 <button @click="decr(2, $event)">购买2件</button><br>
  16.             </div>
  17.         `

2.5 点击按钮执行多个方法

  1.         methods : {
  2.             f1() {
  3.                 alert("f1")
  4.             },
  5.             f2() {
  6.                 alert("f2")
  7.             },
  8.         },
  9.         template : `
  10.             <div>
  11.                 <button @click="f1(), f2()">执行多个方法</button><br>
  12.             </div>
  13.         `

2.6 事件冒泡

  1.         methods : {
  2.             clickDiv() {
  3.                 alert("div");
  4.             },
  5.             clickButton() {
  6.                 alert("button");
  7.             }
  8.         },
  9.         template : `
  10.             <div @click="clickDiv">
  11.                 <button @click="clickButton">事件冒泡</button><br>
  12.             </div>
  13.         `

点击按钮，会先执行 button 上的 click 事件，然后执行 div 上的 click 事件

2.7 阻止冒泡

  1.         template : `
  2.             <div @click="clickDiv">
  3.                 <button @click.stop="clickButton">阻止事件冒泡</button><br>
  4.             </div>
  5.         `

如果我们希望点击按钮时只执行按钮的事件，可以在按钮上使用 @click.stop 的写法阻止事件冒泡。

2.8 事件捕获

  1.         template : `
  2.             <div @click.capture="clickDiv">
  3.                 <button @click="clickButton">事件捕获</button><br>
  4.             </div>
  5.         `

如果希望先执行 div 事件，再执行 button 的事件，可以在 div 上使用 @click.capture 的写法，让事件由外向内执行

2.9 事件只执行一次

  1.         template : `
  2.             <div @click.once="clickDiv">
  3.                 <button @click="clickButton">事件</button><br>
  4.             </div>
  5.         `

在 div 上使用 @click.once ，这样 div 的事件，只会被执行一次

3. 综述

今天聊了一下 VUE3 的 click 事件，希望可以对大家的工作有所帮助

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，每天更新Java干货。

4. 个人公众号

追风人聊Java，欢迎大家关注

VUE3 之 click 事件的更多相关文章

  1. 移动开发那些坑之——safari mobile click事件的冒泡bug

    今天在iphone6 plus的safari上测试这么一段代码: <script> $(document).on('click','.callApp', function() { aler ...

  2. js动态绑定click事件时function传参问题

    今天碰到了这样一个问题,我在javascript中动态创建了一个button, 然后我想给改button添加click事件,绑定的function想要传入一个变量参数, 一开始我想直接通过函数传参传进 ...

  3. jquery 自定义click事件执行多次

    用jquery绑定一个按钮click事件后,第一次点击后一切正常,第二次点击竟然执行两次,以后越来越多, 后来查看文档发现 jquery click 不是替换原有的function 而是接着添加,所以 ...

  4. 关于a标签自身的click事件所带来的一些影响

    众所周知a标签自身带有点击事件<a href="#"></a>从它本身的特性来讲并没有什么不好的影响,但是如果你在a标签里又加入onclick事件则< ...

  5. 关于IOS浏览器：document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  6. js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...

  7. JavaScript区分click事件和mousedown（mouseup、mousemove）方法

    在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...

  8. fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

    之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...

  9. 移动端的传统click事件延迟和点透现象

    一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...

随机推荐

  1. [转]C++中const的使用

    原文链接:http://www.cnblogs.com/xudong-bupt/p/3509567.html 平时在写C++代码的时候不怎么注重const的使用,长久以来就把const的用法忘记了 写 ...

  2. java内存管理的小技巧

    1,尽量使用直接量.     采用String str="hello"; 而不是 String str = new String("hello"): 2,使用S ...

  3. js实现递归菜单无限层

    /*动态加载菜单*/ function dynamicMenu(data){ if (userID != "admin"){ //1.清空所有菜单 $("#menuLis ...

  4. java 动态代理—— Mybaties 拦截器链基本原理实现

    1.摘要 Mybaties 中有个分页插件,之前有特意的去了解了一下原理 :https://www.cnblogs.com/jonrain0625/p/11168247.html,从了解中得知分页插件 ...

  5. jstl中的foreach标签

    <%@ page import="java.util.ArrayList" %><%@ page import="java.util.List" ...

  6. C#生成pdf -- iText7 设置自定义字体和表格

    itextsharp已经不再更新,由iText 7来替代 安装 nuget 安装 itext7 注册自定义字体 下载字体文件 .ttc或.ttf到项目目录,设置更新则拷贝到输出目录,这样构建的时候会把 ...

  7. 下载requests库

    下载requests库 第一步:找到python的安装位置,可以从下面的图中找到 第二步:复制scripts文件夹的位置 第三步:win+r打开cmd cd 到scripts文件夹的位置 第四步:运行 ...

  8. PHP安装sqlsrv扩展（ Centos系统、或宝塔面板）

    最近新安装了一台Centos服务器, 由于软件使用PHP + sqlserver , 因此需要给PHP安装一个sqlsrv扩展, 虽然这个扩展自己也安装过很多次了,但是从来都没有记录下来过,导致偶尔还 ...

  9. supermarket(uaf)！！！！

    在这道题目我花费了很长的时间去理解,因为绕进了死圈子 例行检查我就不放了 关键处在于选择5 使用了realloc,却没有让结构体指针node-> description正确指回去 (11条消息) ...

  10. Linux下编译生成SO并进行调用执行

    Linux下编译生成SO并进行调用执行 参考博客的博客: C编译: 动态连接库 (.so文件) - Vamei - 博客园 (cnblogs.com) C 多个动态库存在同名函数问题处理方法:-fvi ...