vue2事件对象的使用

已于 2023-06-23 19:48:41 修改
阅读量72 收藏
点赞数
分类专栏： js 文章标签： vue.js 前端 javascript
于 2023-06-10 16:48:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dolly_baby/article/details/131143856
版权

vue2事件对象的使用

本文基于H5、Vue.js v2.5.17开发。

  1. 点击按钮使计数值加一。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
</head>
<body>
    <div id="app">
        <p>
            count的值是：{{ count }}
        </p>
        <button @click="add(1, $event)">
            按钮
        </button>
    </div>
    <!-- 开发环境版本 -->
    <script src="vue.js"></script>
    <script>
    	const vm = new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                add(n, e) {
                    this.count +=n;
                    if(this.count%2 == 0) {
                        //e.target ==> button
                        e.target.style.backgroundColor = 'red';
                    } else {
                        e.target.style.backgroundColor = '';
                    }
                }
            }
        })
    </script>
</body>    
</html>
  1. 效果

event_obj_count

快乐江小鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue.js对象转换实例
10-19
主要介绍了 Vue.js对象转换的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下
VUE2实现事件驱动弹窗示例
08-29
在本篇文章中，我们将详细介绍如何使用 VUE2 实现事件驱动弹窗示例。事件驱动弹窗是一种常见的交互方式，它可以根据用户的操作来弹出相应的提示信息。下面我们将详细介绍如何使用 VUE2 来实现事件驱动弹窗示例。 ...
vue2知识点：事件处理
刘大猫
05-20 2040
文章目录一、事件的基本使用二、$event 对象三、事件的修饰符1）prevent2）阻止事件冒泡3）once4）capture5）self6）passive四、键盘事件(键值修饰符) 一、事件的基本使用 注意点1：定义事件函数时，普通函数this指代vue对象，而箭头函数中this指代Window对象。 注意点2：定义事件没参数小括号()可省略，但是用在插值表达式使用一个函数返回值就必须带小括号()，比如 全名：{{fullName()}}。 注意点3：不被vue所管理的函数那么请使用箭头函数。 代.
【Vue2】Vue2中的事件和方法全解
Jessieeeeeee的博客
01-17 3659
Vue2中的事件和方法全解
vue 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象
aifan2109的博客
11-23 187
1 <template> 2 3 4 <div id="app"> 5 6 <!-- 7 <img v-bind:src='url' /> 8 9 <img :src='url' /> --> 10 11 ...
如何在vue事件中获取事件对象
凡友福老师的博客
08-10 5098
在vue2.0中，获取事件对象有三种方式： 第一种：$event关键字 <button @click="fn($event,100)">fn</button> 这里的$event是从哪里来的，非得写这个名字吗？ 只需要绕道背后看看它对应生成的render函数是什么样子就知道了，我列出了关键代码如下 _createElementVNode("button", { onClick: $event => (_ctx.f2(100,$event)) },..) 在生成rende
Vue2学习笔记:事件对象、事件冒泡、默认行为
weixin_30873847的博客
02-21 234
1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script>...
vue事件对象讲解
qq_45378970的博客
09-21 2210
事件对象$event <button @click='fn($event)'></button> **** 在vue中,如点击事件/鼠标移入移出事件等等,事件的回调函数第一个参数默认都为$event(事件对象), 通过事件对象可以用于获取dom元素或者修改dom中的属性. 下面看一下事件对象$event的详解图 e.target.value 可用于获取dom元素的value值(如input框) e.srcElement 表示当前标签 下面来说一下事件对象中括号问题 1.绑定
vue中Map对象使用总结
静心园
04-17 1万+
vue中Map对象使用总结 一般情况下List已经可以处理大部分情况下的业务，但在特殊的场景下，使用map可以节省很多的代码量，但在实践过程中如果套用list的方法去使用则会遇到很多的坑，这里对在Vue中正确使用map对象做一个整理，顺便吐槽下现在网上的文章真是质量低下，很多连js中list和map是啥就可以出来瞎写真的是误人子弟。 map的基本使用 //1.新建 var mapObject=new Map() //2.添加 mapObject.set(key,value) //如果对应的key已经存在，则
Vue2——全局事件总线
mantou_riji的博客
07-20 2372
所以所有的组件实例对象都可以通过原型链找到Vue原型对象上的内容。当组件想要接收数据时在X上绑定自定义事件，编写事件回调函数。为保证所有组件都可以看到x，可以将x放在Vue的原型对象上。需要将赋值为vc（组件实例对象）或vm(vue实例对象)。当组件想要传递数据是去触发X上的事件，可以携带参数。School接收数据，Student组件发送数据。//该组件销毁时记得解绑，避免占用$bus的资源。全局事件总线︰可以实现任意组件间通信。在组件实例对象上可以直接调用。//绑定事件，编写回调函数。.........
Vue 获取事件的 event 对象(2种方式)
热门推荐
前端技术
02-23 1万+
方式一：默认获取 不填写时，默认第一个参数就是 event 对象。 <template> <div> <button @click="onClick">点击</button> </div> </template> <script> export default { methods: { onClick(e) { console.log(e
解决vue 绑定对象内点击事件失效问题
12-12
突然的发现某段 html 代码中点击事件失效了。 仔细观察才发现，这段代码内的...以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue ready事件处理函数使用方法
01-07
在早期版本的Vue（v1.x）中，`ready`事件处理函数是一个重要的生命周期钩子，它会在组件挂载完成后被调用，即当组件实例的`el`选项绑定的DOM元素被插入到文档中时。然而，在Vue的最新版本（v2.x及以上）中，`ready`...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 730
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1033
本文介绍了电子签名、图片合成、及预览功能
vue3使用递归组件渲染层级结构
weixin_42234899的博客
07-25 461
vue3使用递归组件渲染层级结构
Vue系列面试题
qq_44186810的博客
07-23 905
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
前端Web-JavaScript(上)
最新发布
Yu2uki的博客
07-31 942
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 515
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
vue2如何获取事件对象？
03-26
在Vue2中，可以通过事件处理函数的参数来获取事件对象。事件处理函数的参数通常被命名为`event`，你可以在函数中使用`event`来访问事件对象的属性和方法。 以下是一个示例代码： ```html <template> <button @click="handleClick">点击我</button> </template> <script> export default { methods: { handleClick(event) { // 使用event来获取事件对象 console.log(event.target); // 获取触发事件的DOM元素 console.log(event.clientX); // 获取鼠标点击位置的横坐标 console.log(event.clientY); // 获取鼠标点击位置的纵坐标 // ... } } } </script> ``` 在上述代码中，我们通过`@click`指令将`handleClick`方法绑定到按钮的点击事件上。当按钮被点击时，`handleClick`方法会被调用，并且会传入一个事件对象作为参数。我们可以通过访问`event`对象的属性来获取事件相关的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

快乐江小鱼

知识创造财富，余额还是小数

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值