欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

VUE3基础学习之click事件详解

程序员文章站 2022-05-26 12:23:49
...

目录

  1. 概述
  2. click 事件
    2.1 实现数字递减
    2.2 事件方法中获取 event 对象
    2.3 事件方法中增加参数
    2.4 有参事件方法中获取 event 对象
    2.5 点击按钮执行多个方法
    2.6 事件冒泡
    2.7 阻止冒泡
    2.8 事件捕获
    2.9 事件只执行一次

  3. 综述

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

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

  1. click 事件

2.1 实现数字递减
`<body>
<div id="myDiv"></div>
</body>

<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
num : 5
}
},
methods : {
decr() {
if(this.num <= 0) {
alert(“库存为0，无法购买”)
return;
}
this.num— ;
},
},
template : <div> 商品库存剩余 {{num}} 件 <button @click="decr">购买</button><br> </div>
});

  1. const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素`

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

2.2 事件方法中获取 event 对象
decr(event) { console.info(event); console.info(event.target); if(this.num <= 0) { alert("库存为0，无法购买") return; } this.num-- ; },
方法中可以获取 event 对象，从中可以获取一些事件信息
VUE3基础学习之click事件详解
2.3 事件方法中增加参数
methods : { decr(n) { if(this.num < 2) { alert("库存不足，无法购买") return; } this.num -= n; }, }, template :
<div>
商品库存剩余 {{num}} 件
<button @click="decr(2)">购买2件</button><br>
</div>
``
事件方法 decr 中增加了参数 n，依据参数进行计算

2.4 有参事件方法中获取 event 对象
methods : { decr(n, event) { console.info(event); console.info(event.target); if(this.num < 2) { alert("库存不足，无法购买") return; } this.num -= n; }, }, template :
<div>
商品库存剩余 {{num}} 件
<button @click="decr(2, $event)">购买2件</button><br>
</div>
![](https://img.php.cn/upload/image/916/750/114/1641452508169777.png) 2.5 点击按钮执行多个方法 `methods : { f1() { alert("f1") }, f2() { alert("f2") }, }, template : ` <div> <button @click="f1(), f2()">执行多个方法</button><br> </div>
2.6 事件冒泡
methods : { clickDiv() { alert("div"); }, clickButton() { alert("button"); } }, template :
<div @click="clickDiv">
<button @click="clickButton">事件冒泡</button><br>
</div>
``
点击按钮，会先执行 button 上的 click 事件，然后执行 div 上的 click 事件

2.7 阻止冒泡
template :
<div @click="clickDiv">
<button @click.stop="clickButton">阻止事件冒泡</button><br>
</div>
``
如果我们希望点击按钮时只执行按钮的事件，可以在按钮上使用 @click.stop 的写法阻止事件冒泡。

2.8 事件捕获
template :
<div @click.capture="clickDiv">
<button @click="clickButton">事件捕获</button><br>
</div>
``
如果希望先执行 div 事件，再执行 button 的事件，可以在 div 上使用 @click.capture 的写法，让事件由外向内执行

2.9 事件只执行一次
template :
<div @click.once="clickDiv">
<button @click="clickButton">事件</button><br>
</div>
``
在 div 上使用 @click.once ，这样 div 的事件，只会被执行一次

上一篇： PHP归档phar性能测试

下一篇： 轻松接触MySQL数据库支持的3个引擎

推荐阅读