window.addEventListener监听事件在vue组件中使用

最新推荐文章于 2024-05-29 16:21:30 发布
最新推荐文章于 2024-05-29 16:21:30 发布
阅读量7.6k 收藏 4
点赞数 3
分类专栏： vue 文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiChengzhong01/article/details/103817343
版权

最近在搞收银台页面调用终端机的项目，上面领导只是给了一个原生js的demo，让用vue写页面，搞了一天没怎么出成果，最后是监听事件的锅，别的不多说，直接上代码：
在这里插入图片描述写在created里面就好了，ok啦；
注意，有个坑：event那里必须写成箭头函数，负责下面的this指向不对

前端vue
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jQuery Mobile事件，开发全解+完美注释
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-05 2956
//使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行 $(document).on("pagecreate","#pageone",function(){ // jQuery 事件... }); //点击事件 $("p").on("tap",function(){ $(this).hide(); }); //长按事件 点击不放（长按） 事件在点击并不放（大约
vue addeventlistener_你绝对疏忽的 vue 技巧
weixin_39924307的博客
11-20 1万+
1. 内部监听生命周期函数<功能写完开开心心的提测了，测试没啥问题，产品经理表示做的很棒。然而code review时候，技术大佬说了，这样有问题。 大佬：这样写不是很好，应该将监听`resize`事件与销毁`resize`事件放到一起，现在两段代码分开而且相隔几百行代码，可读性比较差 我：那我把两个生命周期钩子函数位置换一下，放到一起? 大佬： `hook`听过没？ 我：`Vu...
Vue2 Watch监听
m0_61093181的博客
04-26 5731
通过watch监听器，我们可以实时监控数据的变化，并且在数据发生改变时进行相应的操作。我们还可以使用$watch方法手动添加监听器，以及从组件实例中移除它。这是Vue2非常强大的一个功能，可以帮助我们更好地管理和维护数据。
window.addEventListener 用法
最新发布
ivan5277的博客
05-29 1515
是JavaScript中用来为DOM元素（在本例中是浏览器窗口window）添加事件监听器的方法。这对于响应用户操作（如点击、滚动等）或页面/浏览器的特定状态变化非常有用。下面是如何使用。
Vue生命周期
Alienkp的博客
07-27 535
Vue的生命周期就是vue实例从创建到销毁的全过程，也就是newVue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。......
window.onresize与window.addEventListener(‘resize‘,...)来做浏览器窗口的缩放监听
weixin_44490109的博客
02-23 2万+
目录一、背景二、`window.onresize`为什么在重复使用过程中会被覆盖？三、`window.addEventListener`的运用 一、背景 在做浏览器窗口监听时我们该选用window.onresize还是window.addEventListener('resize',...)呢？之前遇到过这样一种情况，在一个vue项目的navBar部份使用了window.onresize做了监听控制，当窗口缩放到一定大小以下时菜单只显示图标隐藏文字，后面由于在做表格时也需要去做监听以实现自适应策略，在实现的
使用vue.js在页面内组件监听scroll事件的方法
12-29
window.addEventListener(scroll, function(){ console.log('scrolling'); }); 这是监听不到的！如果你整个网页可以滑动，或许还可以试试！ 对于像我这样，只在页面的内的一个div内要监听的。 实现代码如下： 第一...
解决vue 给window添加和移除resize事件遇到的坑
11-20
在Vue.js应用中，我们经常需要监听`window`对象的`resize`事件，以便在窗口尺寸发生变化时调整组件布局或执行相应的操作。然而，在实际开发过程中，可能会遇到一个常见的问题，即在离开当前页面后，窗口大小改变时，...
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
12-13
在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时，自动加载更多的时候有这个需求。 我认为使用document.addEventListener会破坏...
使用 vue 实例更好的监听事件及vue实例的方法
01-21
文章举例说明一下在 vue 中如何更好的监听浏览器事件。原文介绍了一种新增 vue 实例的方法，单独监听事件。这样代码书写较为简练，容易管理。 当监听如下事件的传统做法是： window.scrollX window.scrollY ...
vue监听 vue实时监听窗⼝滚动条
07-05
在Vue组件的`mounted`生命周期钩子中，我们可以添加事件监听器来监听窗口的滚动事件。这是因为`mounted`阶段表示组件已经被挂载到DOM中，此时可以安全地操作DOM和添加事件监听器。代码如下： ```javascript ...
如何使window.addEventListener监听事件在vue组件中使用
elephant230的博客
08-05 7519
刚才在一个前端群里，看到有人提出怎样让window.addEventListener监听事件在单独的vue组件中使用的问题。 刚好之前在一个移动端vue组件中用到了touchmove事件，在这里做个记录。 不多说，上代码： 在vue组件中的methods中，scroll方法滚动事件，涉及到了监听touchmove事件 ...
addEventListener() 方法，事件监听
热门推荐
milijiangjun的博客
11-27 4万+
addEventListener() 方法，事件监听 你可以使用 removeEventListener() 方法来移除事件的监听。 语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函
vue 自定义指令中：addEventlistener监听事件函数传参，使用removeEventListener解绑
qq_38416502的博客
04-25 3369
上面我们在自定义指令的时候在mounted中对dom添加事件监听，在beforeUnmount中进行事件解绑，但是第二个参数是匿名函数，所以add和remove的函数不是同一个所以参数不一致，remove是无效的。一般在组件中使用addeventlistener添加事件监听的时候，在组件销毁的时候都要使用removeEventListener进行销毁，不然会造成内存泄漏。上面这样写确实可以消除掉绑定的事件，但是无法进行参数的传递无法再函数中使用el，biinding等参数。
vue使用window.addEventListener 监视网络状态中，箭头函数与function的区别
qingdatiankong的博客
07-14 1222
vue使用window.addEventListener 监视网络状态中，箭头函数与function的区别
Vue进阶（九十五）：addEventListener() 监听事件
IT全栈 华强工作室
01-20 2万+
语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 注意:不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “oncl...
Vue 中addEventListener事件回调函数this的指向
XIAIBIANCHENG的专栏
01-22 4884
在Vue中调用document.addEventListener添加事件回调函数,在回调函数中调用this对象时，通过调试发现，this指向的是之前调用document.addEventListener的Vue对象或者Vue组件示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l
vue addeventlistener_浅析vue封装自定义插件
weixin_39936134的博客
11-21 408
在使用vue的过程中，经常会用到Vue.use，但是大部分对它一知半解，不了解在调用的时候具体做了什么，因此，本文简要概述下在vue中，如何封装自定义插件。在开始之前，先补充一句，其实利用Vue封装自定义插件的本质就是组件实例化的过程或者指令等公共属性方法的定义过程，比较大的区别在于封装插件需要手动干预，就是一些实例化方法需要手动调用，而Vue的实例化，很多逻辑内部已经帮忙处理掉了。插件相对于组件...
vue main.js中如何实现window.addEventListener、
02-06
在 main.js 文件中，你可以这样使用 window.addEventListener: ``` window.addEventListener('eventName', eventHandler) ``` 其中，'eventName' 是你要监听的事件的名称，eventHandler 是一个回调函数，在事件被...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值