如何在Vue中执行window.addEventListener这样的操作

最新推荐文章于 2024-07-01 11:32:55 发布
原创 最新推荐文章于 2024-07-01 11:32:55 发布 · 4.1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #前端 #javascript
文章讲述了在前端开发中如何全局监听网络状态改变事件，通过在App.vue文件中添加window.addEventListener(online,...)来确保所有页面都能响应网络状态的变更，以此来弹出相应消息提示或处理其他逻辑。这种方法适用于需要在网络状态变化时执行全局逻辑的场景，如检测登录状态等。

需求内容

对应用所有的页面都监听一个网络状态改变事件，当网络状态改变时，弹出对应的消息提示

最初想法是使用online监听事件

window.addEventListener('online', () => {
            this.onLine = true
        })

这样虽然可以监听到事件，但只能在当前页面
online事件并没有挂载到全局

日常开发中可能经常有类似的场景，比如检测登录状态等等，我们需要执行的逻辑必须挂载到全局中

百度很久都没有答案，这里记录一下

方案

在App.vue文件中执行window.addEventListene即可，这样所有页面都会对网络状态改变做出反应

Eoned
关注
Vue进阶（九十五）：addEventListener() 监听事件_vue addeventlistener
2401_84617477的博客
05-16 1411
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
Vue3学习笔记
qq_49278026的博客
06-16 945
Vue3学习笔记、vue2响应式原理，vue3响应式原理
Vue进阶（九十五）：addEventListener() 监听事件_vue addeventlistener(3)
2401_84617477的博客
05-16 836
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
vue使用window.addEventListener点击事件会执行多次解决办法
weixin_45799605的博客
11-10 1万+
1. 第一种方法是在mounted中创建，在离开页面时一定要销毁不然再次进入页面会执行多次 2. 由上图可见 如果init方法需要在别的方法里调用和传参也要保证e的存在 第二种方法不用创建和销毁 直接在方法里 window.onclick = (e) => { ..... } ...
vue使用window.addEventListener 监视网络状态中，箭头函数与function的区别
qingdatiankong的博客
07-14 1430
vue使用window.addEventListener 监视网络状态中，箭头函数与function的区别
Vuejs中使用addEventListener的事件触发执行函数的this
热门推荐
nzyalj的博客
04-24 2万+
addEventListener => this
vue项目中销毁window.addEventListener事件监听解析
2301_76510083的博客
03-17 1357
销毁window.addEventListener事件监听
window.onresize与window.addEventListener(‘resize‘,...)来做浏览器窗口的缩放监听
weixin_44490109的博客
02-23 2万+
目录一、背景二、`window.onresize`为什么在重复使用过程中会被覆盖？三、`window.addEventListener`的运用 一、背景 在做浏览器窗口监听时我们该选用window.onresize还是window.addEventListener('resize',...)呢？之前遇到过这样一种情况，在一个vue项目的navBar部份使用了window.onresize做了监听控制，当窗口缩放到一定大小以下时菜单只显示图标隐藏文字，后面由于在做表格时也需要去做监听以实现自适应策略，在实现的
vue监听页面上的报错信息,window.onerror和window.addEventListener(‘error‘)的区别
weixin_44727080的博客
01-28 7036
前言： 监听页面上的报错信息 项目中使用：判断路径上有没有这个版本号...具体内容可根据实际情况来 constasyncVersion='20210128' window.addEventListener('error', handleListenerError, true); function handleListenerError (eventErr){ if (eventErr.srcElement.localName.includes('link' ||...
如何使window.addEventListener监听事件在vue组件中使用
elephant230的博客
08-05 7677
刚才在一个前端群里，看到有人提出怎样让window.addEventListener监听事件在单独的vue组件中使用的问题。 刚好之前在一个移动端vue组件中用到了touchmove事件，在这里做个记录。 不多说，上代码： 在vue组件中的methods中，scroll方法滚动事件，涉及到了监听touchmove事件 ...
window.onresize和window.addEventListener
weixin_43258184的博客
11-05 1062
vue中在mounted中window.onresize不生效是因为： 引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。 把window.onresize改为window.addEventListener window.onresize = () => { if (screenfull.isFullscreen) { this.show = false; this.tableHeight = w
vue main.js中能使用window.addEventListener
weixin_35750483的博客
01-09 957
是的，在 Vue.js 的 main.js 中可以使用 window.addEventListener。 这个方法用于向浏览器的 window 对象添加事件监听器，即当指定的事件发生时，会触发回调函数。 例如，你可以在 main.js 中这样使用 window.addEventListener： window.addEventListener('load', function () { con...
Vue组件内加载script，无法解析js的window.addEventListener(‘load‘, fn)；
最新发布
zhanghuaiwei
07-01 509
Vue组件内加载script，无法解析js的window.addEventListener('load', fn);
Vue进阶（九十五）：addEventListener() 监听事件
IT全栈 华强工作室
01-20 2万+
语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 注意:不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “oncl...
window.addEventListener相关参数介绍说明
m0_60237095的博客
08-16 1万+
事件监听各个参数的含义
vue自学,window.addEventListener不生效解决方案
yrldjsbk的博客
02-25 9058
自己的代码里写的时候，多了一个小括号，导致代码不生效。百度反复查询了各种解决方案，最终，在对比网友的解决方案时候，注意到了这个细节，发现网友的方法调用，也是不带小括号的。我去掉括号后，代码生效了。最近在网上跟着别人的教程视频自学vue，在给window对象添加监听事件后，发现起初，一直没有效果。找不到原因，比较困惑。如图，出现了 这个脚本的图标，点击，就会回到页面的顶部，大于400像素后会出现，小于400像素是不会出现的。如图，这是自定义一个判定，要不要显示该图标的代码。如图，这是老师视频里面的截图代码。
Vue项目中data数据无法被window.addEventListener中获取
silver577的博客
07-17 2689
Vue项目中data数据无法被window.addEventListener中获取
vue addeventlistener_你绝对疏忽的 vue 技巧
weixin_39924307的博客
11-20 1万+
1. 内部监听生命周期函数<功能写完开开心心的提测了，测试没啥问题，产品经理表示做的很棒。然而code review时候，技术大佬说了，这样有问题。 大佬：这样写不是很好，应该将监听`resize`事件与销毁`resize`事件放到一起，现在两段代码分开而且相隔几百行代码，可读性比较差 我：那我把两个生命周期钩子函数位置换一下，放到一起? 大佬： `hook`听过没？ 我：`Vu...
Vue进阶（九十五）：addEventListener() 监听事件_vue addeventlistener(2)
2401_84617431的博客
05-16 1081
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】第一个参数：事件的类型 (如 “click” 或 “mousedown。
vu3知识点
LYY_1017的博客
09-04 578
支持多个根标签...<<<1、setup是Vue3中一个新的配置项，值为一个函数；2、组件中所要用到的数据、方法等，均要配置在setup中；3、setup的两种返回值：（1）：若返回一个对象，则对象中的属性、方法，均可以在模板中直接使用；（2）：若返回一个渲染函数：则可以自定义渲染内容；setup的两个注意点：1、setup执行时机，在beforeCreate之前执行一次，this是undefined；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值