使用 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 相关文章推荐
jquery isType() 类型判断代码
Feb 14 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
JS运算符简单用法示例
Jan 19 Javascript
vue配置多代理服务接口地址操作
Sep 08 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(2)
2006/10/09 PHP
用文本文件制作留言板提示(下)
2006/10/09 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP模板解析类实例
2015/07/09 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
Python聊天室实例程序分享
2016/01/05 Python
使用Python设计一个代码统计工具
2018/04/04 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
董事长助理岗位职责
2014/02/18 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
秦兵马俑导游词
2015/02/02 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL