使用 vue 实例更好的监听事件及vue实例的方法


Posted in Javascript onApril 22, 2019

文章举例说明一下在 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 实例更好的监听事件及vue实例的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
基于node.js之调试器详解
Aug 22 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 #Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 #Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 #Javascript
详解Vue中使用Axios拦截器
Apr 22 #Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 #Javascript
vue 项目build错误异常的解决方法
Apr 22 #Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 #Javascript
You might like
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
php实现生成验证码实例分享
2016/04/10 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
js编写简易的计算器
2020/07/29 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python中datetime模块参考手册
2017/01/13 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python requests使用socks5的例子
2019/07/25 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
网络安全方面的面试题
2016/01/07 面试题
毕业研究生的自我鉴定
2013/11/30 职场文书
新闻通讯稿模板
2015/07/22 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
Nginx 常用配置
2022/05/15 Servers