使用 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用函数实现对象的方法
May 14 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 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
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
Express的路由详解
2015/12/10 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
深入研究React中setState源码
2017/11/17 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python的time模块中的常用方法整理
2015/06/18 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
财务管理个人自荐书范文
2013/11/24 职场文书
525心理活动总结
2014/07/04 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
2014年工人工作总结
2014/11/25 职场文书
司机个人年终总结
2015/03/03 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
MYSQL 表的全面总结
2021/11/11 MySQL