使用 vue 实例更好的监听事件及vue实例的方法
更新时间：2019年04月22日 09:51:03 作者：JS菌
这篇文章主要介绍了使用 vue 实例更好的监听事件及vue实例的方法,介绍了一种新增 vue 实例的方法，单独监听事件，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
文章举例说明一下在 vue 中如何更好的监听浏览器事件。原文介绍了一种新增 vue 实例的方法，单独监听事件。这样代码书写较为简练，容易管理。
当监听如下事件的传统做法是：
- window.scrollX
- window.scrollY
- window.innerHeight
- window.innerWidth
通常需要书写很多代码：
created () {
this.$el.addEventListener('click', this.someMethod)
},
destroyed () {
this.$el.removeEventListener('click', () => this.someMethod)
}
更好的方式是使用新的 Vue 实例
import Vue from 'vue'
const WindowInstanceMap = new Vue({
data() {
return {
scrollY: 0
}
},
created() {
window.addEventListener('scroll', e => {
this.scrollY = window.scrollY
})
},
})
export default WindowInstanceMap
然后在项目中使用：
// AppNav.vue
import WindowInstanceMap from './WindowInstanceMap.js'
export default {
computed: {
scrollY () { return WindowInstanceMap.scrollY },
isCollapsed () {
return this.scrollY < 100
}
}
}
这样做的好处是：
- 不会大量占用 dev-tool 的版面显示变动信息
- 减少主要项目的代码
- 因为 dev-tool 不支持多实例的调试，因此需要对这部分代码保持简单
最后看看效果：
总结
以上所述是小编给大家介绍的使用 vue 实例更好的监听事件及vue实例的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了Vue组件生命周期运行原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
利用vue+elementUI设置省市县三级联动下拉列表框的详细过程
在做电商项目的时候需要添加修改收货地址,如何实现三级联动选取省市区地址困扰了我不少时间,这篇文章主要给大家介绍了关于利用vue+elementUI设置省市县三级联动下拉列表框的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue后台返回base64图片无法显示的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue 动态样式绑定 class/style的写法小结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
vue3生成二维码的方式有很多种,下面这篇文章主要给大家介绍了关于如何基于Vue3实现扫码枪扫码并生成二维码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要为大家介绍了Vue之过滤器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助2021-11-11
小编在开发使经常会碰到全局切换问题，今天小编给大家带来一篇教程给大家介绍vue 全局环境切换问题，感兴趣的朋友一起看看吧2019-10-10
这篇文章主要为大家详细介绍了vue实现单选和多选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
vue vite之LogicFlow安装核心依赖及项目初始化详解
这篇文章主要为大家介绍了vue vite之LogicFlow安装核心依赖及项目初始化详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
Vue 使用高德地图添加点标记 + 点击地图获取坐标 + 带搜索(即地
这篇文章主要介绍了Vue 使用高德地图添加点标记 + 点击地图获取坐标 + 带搜索(即地理编码 + 逆地理编码) 附完整示例,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-01-01
最新评论