使用 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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
jquery JSON的解析方式
Jul 25 Javascript
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
jQuery实现全选按钮
Jan 01 jQuery
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
详解react-redux插件入门
2018/04/19 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
举例详解Python中的split()函数的使用方法
2015/04/07 Python
使用Python进行目录的对比方法
2018/11/01 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Python实现汇率转换操作
2020/05/03 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
某公司部分笔试题
2013/11/05 面试题
仓库班组长岗位职责
2013/12/12 职场文书
肯尼迪就职演说稿
2013/12/31 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
个人作风剖析材料
2014/02/02 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
小学班主任个人总结
2015/03/03 职场文书
导游词之西安骊山
2019/12/20 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
CSS完成视差滚动效果
2021/04/27 HTML / CSS