VUE3基础学习之click事件详解 VUE3基础学习之click事件详解

1. 概述
2. click 事件

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

3. 综述

1. 概述老话说的好：努力帮别人解决难题，你的难题也就不难解决了。
言归正传，今天我们来聊聊 VUE3 的 click 事件的相关知识。

2. click 事件
2.1 实现数字递减

const app = Vue.createApp({// 创建一个vue应用实例data() {return {num : 5}},methods : {decr() {if(this.num <= 0) {alert("库存为0，无法购买")return; }this.num-- ; },},template : `商品库存剩余 {{num}} 件
`}); 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 对象，从中可以获取一些事件信息

文章图片

2.3 事件方法中增加参数

methods : {decr(n) {if(this.num < 2) {alert("库存不足，无法购买")return; }this.num -= n; },},template : `商品库存剩余 {{num}} 件
`

事件方法 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 : `商品库存剩余 {{num}} 件
`

文章图片

2.5 点击按钮执行多个方法

methods : {f1() {alert("f1")},f2() {alert("f2")},},template : `
`

2.6 事件冒泡

methods : {clickDiv() {alert("div"); },clickButton() {alert("button"); }},template : `
`

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

2.7 阻止冒泡

template : `
`

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

2.8 事件捕获

template : `
`

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

2.9 事件只执行一次

template : `
`

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

3. 综述今天聊了一下 VUE3 的 click 事件，希望可以对大家的工作有所帮助
【VUE3基础学习之click事件详解】到此这篇关于VUE3基础学习之click事件的文章就介绍到这了,更多相关VUE3之click事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！