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 实现数字递减
<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>
`
});
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 : `
<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>
`
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 的事件，只会被执行一次
3. 综述
今天聊了一下 VUE3 的 click 事件，希望可以对大家的工作有所帮助
到此这篇关于VUE3基础学习之click事件的文章就介绍到这了,更多相关VUE3之click事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue.js click点击事件获取当前元素对象的操作
Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He
-
解决vue组件中click事件失效的问题
最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&
-
Vue的click事件防抖和节流处理详解
函数防抖 定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行. 在vue中对click添加防抖处理 const on = Vue.prototype.$on // 防抖处理 Vue.prototype.$on = function (event, func) { let timer let newFunc = func if (event === 'click') { newFunc = function () { clearTimeout(timer) timer = s
-
vue 实现click同时传入事件对象和自定义参数
仅仅传入自定义参数 HTML <div id="app"> <button @click="tm(123)">ddddd</button> </div> JS代码 new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); } } }) 仅仅传入事件对象 HTML <div id="app"> <button @cl
-
Vue根据条件添加click事件的方式
需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件:clickFlag == false时,去掉click事件:) 解决方法: 方式一:在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> 添加产品 </div> 方式二:用v-if .v-else-if.v-else 判断 <div v-if=&q
-
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 实现数字递减 <body>
-
JavaScript基础学习之splice()函数详解
目录 splice()函数详解 一.情况一(只有一个参数) 二.情况二 (两个参数) 三.情况三 (大于等于三个参数) 总结 splice()函数详解 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 参数: index —— 必需.整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置.howmany —— 必需.要删除的项目数量.如果设置为 0,则不会删除项目.item1, …, itemX —— 可选.向数组添加的新项目. 返回
-
Git基础学习之分支基本操作详解
目录 1.创建分支 (1)创建分支 (2)图示理解 2.查看分支列表 3.分支切换 4.查看所有分支的最后一个提交 5.删除分支 1.创建分支 (1)创建分支 Git 是怎么创建新分支的呢? 很简单,就是要创建一个可以移动的新的指针. 比如,创建一个testing分支, 你需要使用命令:git branch testing. 示例: # 1.查看本地版本库历史提交 L@DESKTOP-T2AI2SU MINGW64 /j/git-repository/learngit (master) $ gi
-
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
本文实例讲述了Python基础学习之基本数据结构.分享给大家供大家参考,具体如下: 前言 相比于PHP,Python同样也是脚本解析语言,所以在使用Python的时候,变量和数据结构相对于编译语言来说都会简单许多,但是Python相比于PHP来说,变量类型的定义会比较严格:string->int的转换没有PHP那么方便.但这也让程序稳定性有所提升,例如和客户端交互的时候,数据库取出来的数字int和缓存取出来的数字(默认是string)需要手动进行转换(否则会有报错提示),而PHP不需要手动转换的
-
Java基础学习笔记之数组详解
本文实例讲述了Java基础学习笔记之数组.分享给大家供大家参考,具体如下: 数组的定义于使用 1:数组的基本概念 一组相关变量的集合:在Java里面将数组定义为引用数据类型,所以数组的使用一定要牵扯到内存分配:想到了用new 关键字来处理. 2:数组的定义格式 区别: 动态初始化后数组中的每一个元素的内容都是其对应数据类型的默认值,随后可以通过下标进行数组内容的修改: 如果希望数组定义的时候就可以提供内容,则采用静态初始化的方式: a:数组的动态初始化(声明并初始化数组): 数据类型 数组名称
-
Vue 2.0入门基础知识之内部指令详解
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-
-
vue3弹出层V3Popup实例详解
Vue3-Popup 基于vue3构建的手机端自定义弹层组件. 一款集合了msg.alert.dialog.modal.actionSheet.toast等多种效果的Vue3自定义弹层组件.支持上下左右弹出.圆角.自定义弹层样式.多按钮及长按/右键功能. 引入v3popup // 在main.js中全局引入 import { createApp } from 'vue' import App from './App.vue' // 引入弹窗组件v3popup import V3Popup fro
-
javascript数据代理与事件详解分析
目录 数据代理与事件 回顾Object.defineProperty方法 何为数据代理 Vue中的数据代理 事件的基本使用 事件的修饰符 键盘事件 数据代理与事件 星光不负赶路人,满身花香蝶自来 回顾Object.defineProperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法<
-
C++ EasyX学习之鼠标操作详解
目录 基础代码 进阶编程 基础代码 功能:移动画点,左键画方块,右键退出. #include <graphics.h> #include <conio.h> int main() { // 初始化图形窗口 initgraph(640, 480); MOUSEMSG m; // 定义鼠标消息 while (true) { ExMessage m;//定义一个消息变量 m = getmessage(EM_MOUSE);//获取鼠标消息 switch (m.message) { case
-
vue基础ESLint Prettier配置教程详解
目录 引言 前言 安装 VsCode 插件 配置 VsCode "Workspace.json" 配置 vue 的 "package.json" 配置 vue 的 ".eslintrc.js" 配置 vue 的 ".prettierrc" 配置 "eslint --fix" 一键修复 配置 ESlint 提交时检测 测试配置效果 问题排查 尾声 引言 VsCode + Vue + ESLint + Pret