vue 创建监听,和销毁监听(addEventListener, removeEventListener)

最近在做一个有关监听scroll的功能, 发现我添加监听之后一直不起作用:

1 2	`mounted() {` `window.addEventListener("scroll",` `this.setHeadPosition);` `//this.setHeadPosition方法名`

　　后来发现要在后面添加一个true之后才行:

mounted() {

window.addEventListener("scroll", this.setHeadPosition, true);

},

　　而在离开是的时候需要销毁监听: (在destroyed里面销毁), 否则监听会一直存在, 因为这是单页面应用, 页面并未关闭.

destroyed() {

window.removeEventListener("scroll", this.setHeadPosition, true);

},

　在销毁的时候一定也要加上true, 否则销毁不起作用.

原文地址：https://www.cnblogs.com/h2zZhou/p/11847011.html

时间： 2024-10-12 14:33:31

vue 创建监听,和销毁监听(addEventListener, removeEventListener)的相关文章

nginx源码分析--监听套接字的创建套接字的监听 HTTP请求创建连接

作为一个web服务器,那么肯定是有监听套接字的,这个监听套接字是用于接收HTTP请求的,这个监听套接字的创建是根据配置文件的内容来创建的,在nginx.conf文件中有多少个地址就需要创建多少个监听套接字.这里不说各个结构体的构造只说大体情况! 1).首先在main函数中调用了ngx_init_cycle()函数,在这个函数的最后调用了ngx_open_listening_sockets函数,这个函数负责将创建的监听套接字进行套接字选项的设置(比如非阻塞.接受发送的缓冲区.绑定.监听处理) 2

动态监听与静态监听(转载)

目录(?)[+] 1.在lsnrctl命令的status时常会看到如下返回值 1.认识下注册 2.静态监听 3.动态注册 1.1 缺省的动态注册 2.2 自定义端口的动态注册监听在lsnrctl命令的status时,常会看到如下返回值: [plain] view plain copy print? Service "elvis" has 2 instance(s). Instance "elvis", statusUNKNOWN, has 1 handler(s)

WCF-ServiceEndpoint的监听地址与监听模式

ServiceEndpoint具有一个可读可写的ListenUri属性,该属性表示服务端终结点的物理监听地址,该地址默认和终结点逻辑地址一致(即ServiceEndpoint的Uri).对于客户端来说,请求真正发送的目标地址是服务的监听地址,默认情况下终结点的逻辑地址和监听地址是一样的.监听地址可以通过ServiceHost的AddServiceEndpoint指定. public ServiceEndpoint AddServiceEndpoint(Type implementedContra

Android 监听 Android中监听系统网络连接打开或者关闭的实现代码

本篇文章对Android中监听系统网络连接打开或者关闭的实现用实例进行了介绍.需要的朋友参考下很简单,所以直接看代码复制代码代码如下: package xxx; import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.net.ConnectivityManager; import android.ne

oracle数据库静态监听和动态监听区别

oracle静态监听和动态监听一.什么是注册? 注册就是将数据库作为一个服务注册到监听程序.客户端不需要知道数据库名和实例名,只需要知道该数据库对外提供的服务名就可以申请连接到数据库.这个服务名可能与实例名一样,也有可能不一样. 在数据库服务器启动过程中,数据库服务器会向监听程序注册相应的服务(无论何时启动一个数据库,默认地都有两条信息注册到监听器中:数据库服务器对应的实例和服务.) 相当于是这样:在数据库服务器和客户端之间有一监听程序(Listener),在监听程序中,会记录相应数据库对

1.3 Vue中的计算属性和侦听器

Vue中的计算属性和侦听器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue中的计算属性和侦听器</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

vue — 创建vue项目

vue - 创建vue项目创建vue项目在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了开发步骤,使用广泛. vue本地引用在官网下载vue.js,通过script标签引入.开发版本:https://vuejs.org/js/vue.js 包含完整的警告和调试模式生产版本:https://vuejs.org/js/vue.min.js 删除了警告,30.9

redis数据库-VUE创建项目

redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据--存储在硬盘上 redis: 存在内存中 --- 速度最快用途: --做缓存 --session数据 --游戏排行榜 --对速度要求高的数据的存储 -- 消息队列 ''' redis VS Memcached -- redis 支持五大数据类型 : 字符串| 列表| 字典 | 集合| 有序集合

vue 524 (生命周期计算属性监听)

每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会. 依据上表可以确定各个位置的先后触发顺序 // 关于计算属性: vue改变或获取一个内部方法有以下两种种. 1.在vue对象中以 methods:{}模式定义各类成员方法: 例如(js vue对象定义内): methods:{ FF1(){return