使用 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实例的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue监听事件实现计数点击依次增加的方法

    1.实现计数器功能,每点击一次按钮,count值增加一或增加二,鼠标在cordinates行移动时会更新当前坐标,通过自定义函数或者stop属性禁止事件传播. 效果如下: 代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>计数器自增函数</title> <script src="vue.js"></s

  • Vue axios全局拦截 get请求、post请求、配置请求的实例代码

    下面通过一段代码给大家介绍Vue axios全局拦截 get请求.post请求.配置请求,具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.js"&g

  • 在vue项目中优雅的使用SVG的方法实例详解

    1.基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标. 本文以vue项目为例,当然在react中的使用原理基本相似. svg图标可以直接通过img标签来使用,也可当做icon来使用. 本文是参考了鑫旭大佬的文章:SVG Sprite技术介绍. 2.配置 安装svg-sprite-loader.通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,所以需要处理下: { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, l

  • vue2.0移动端滑动事件vue-touch的实例代码

    Vue-touch的使用 有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了 API地址: https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save //main.js中引入: import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) 用法如下: //html代码

  • vue1.0和vue2.0的watch监听事件写法详解

    如下所示: watch: { aaa: { handler: function (newVal,oldVal) { console.log('当前的值:'+ newVal); console.log('旧的值' + oldVal); }, deep: true //深度监听 } } 以上这篇vue1.0和vue2.0的watch监听事件写法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch

  • vue v-on监听事件详解

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下简单的监听事件代码. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <scrip

  • Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数.mutation 必须是同步函数. 不带载荷(只改变数据的状态) 接前面几篇文章的例子,这里我们修改商品价格减半. store.js mutations: { //商品价格减半:

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

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

    文章举例说明一下在 vue 中如何更好的监听浏览器事件.原文介绍了一种新增 vue 实例的方法,单独监听事件.这样代码书写较为简练,容易管理. 当监听如下事件的传统做法是: window.scrollX window.scrollY window.innerHeight window.innerWidth 通常需要书写很多代码: created () { this.$el.addEventListener('click', this.someMethod) }, destroyed () { t

  • Android监听来电和去电的实现方法

    本文实例讲述了Android监听来电和去电的实现方法.分享给大家供大家参考,具体如下: 要监听android打电话和接电话,只需下面2步骤 第一步,写一个Receiver继承自BroadcastReceiver import android.app.Service; import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import andr

  • elementUi vue el-radio 监听选中变化的实例代码

    elementUi vue el-radio 监听选中变化的实例代码如下所述: //change是radio-group标签的事件 <div> <el-radio-group v-model="radioSex" @change="changeHandler"> <el-radio class="radio" label="man">男</el-radio> <el-rad

  • vue 监听屏幕高度的实例

    项目用vue版本是2.0的,项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把window.onresize事件挂在到mounted mounted() { const that = this window.onresize = () => { return (() => { window.fullHeight = document.docum

  • vue使用element-ui的el-input监听不了回车事件的解决方法

    原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在el

  • vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

    本文实例讲述了vue自定义键盘信息.监听数据变化的方法.分享给大家供大家参考,具体如下: @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13; @keydown.a/b/c.... <input type="text" @keydown.c="show&quo

  • 如何在Vue项目中添加接口监听遮罩

    一.业务背景 使用遮罩层来屏蔽用户的非正常操作,是前端经常使用的方式.但是在一些项目中,并没有对遮罩层进行统一管理,这就会造成如下的问题: (1)所有的业务组件都要引入遮罩层组件,也就是每个.vue业务组件,都在template中引入了Mask组件.组件在项目的各个角落都存在,不利于管理,代码极度冗余. (2)Mask组件都分散到业务的各个角落,所以控制是否显示遮罩层的变量也散在业务组件中.比如使用maskShow来控制是否展示遮罩层时,一个较为复杂的项目中会产生200+的maskShow变量.

  • 关于vue路由监听事件跳转的问题

    目录 vue路由监听事件跳转 1.监听路由触发事件的语法 2.可能遇到的问题 vue路由监听不到怎么办 方法一 方法二 方法三 vue路由监听事件跳转 1.监听路由触发事件的语法  watch: {     $route: function clearSelectionRow() {       console.log("success");       this.$emit("setSelectionFile", []);     },   } 代码实现功能:当本

  • JS实现移动端实时监听输入框变化的实例代码

    JS实现移动端实时监听输入框变化的实例代码

    如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange

随机推荐