vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作

效果图如下所示

.html

今日热门
今日热销

.js

mounted(){

window.addEventListener('scroll',this.handleScrollx,true)

},

methods: {

handleScrollx() {

console.log('滚动高度',window.pageYOffset)

console.log('距离顶部高度',this.$refs.pronbit.getBoundingClientRect().top)

},

}

补充知识:Vue异步更新队列 及 $nextTick的使用

问题一:什么是$nextTick?

简单回答:

因为Vue的异步更新队列,$nextTick是用来知道什么时候DOM更新完成的。

详细解读:

我们先来看这样一个场景:有一个div,默认用 v-if 将它隐藏,点击一个按钮后,改变 v-if 的值,让它显示出来,同时拿到这个div的文本内容。如果v-if的值是 false,直接去获取div内容是获取不到的,因为此时div还没有被创建出来,那么应该在点击按钮后,改变v-if的值为 true,div才会被创建,此时再去获取,示例代码如下:

这是一段文本

获取div内容

var app = new Vue({

el : "#app",

data:{

showDiv : false

},

methods:{

getText:function(){

this.showDiv = true;

var text = document.getElementById('div').innnerHTML;

console.log(text);

}

}

})

这段代码并不难理解,但是运行后在控制台会抛出一个错误:Cannot read property 'innnerHTML of null,意思就是获取不到div元素。这里就涉及Vue一个重要的概念:异步更新队列。

异步更新队列

Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生的所有数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。然后,在下一个事件循环tick中,Vue刷新队列并执行实际(已去重的)工作。所以如果你用一个for循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,这固然是一个很大的开销。

Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver,如果都不支持,就会采用setTimeout代替。

知道了Vue异步更新DOM的原理,上面示例的报错也就不难理解了。事实上,在执行this.showDiv = true时,div仍然还是没有被创建出来,直到下一个vue事件循环时,才开始创建。$nextTick就是用来知道什么时候DOM更新完成的,所以上面的示例代码需要修改为:

这是一段文本

获取div内容

var app = new Vue({

el : "#app",

data:{

showDiv : false

},

methods:{

getText:function(){

this.showDiv = true;

this.$nextTick(function(){

var text = document.getElementById('div').innnerHTML;

console.log(text);

});

}

}

})

这时再点击事件,控制台就打印出div的内容“这是一段文本“了。

理论上,我们应该不用去主动操作DOM,因为Vue的核心思想就是数据驱动DOM,但在很多业务里,我们避免不了会使用一些第三方库,比如 popper.js、swiper等,这些基于原生javascript的库都有创建和更新及销毁的完整生命周期,与Vue配合使用时,就要利用好$nextTick。

以上这篇VUE实时监听元素距离顶部高度的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/244895.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙首饰用什么合成,天下HD鸿蒙炼炉是什么?鸿蒙炼炉讲解

在玩天下HD的时候各位又是否知道鸿蒙炼炉是什么呢?其实鸿蒙炼炉是游戏之中一个很重要的系统,而对于这个系统本次小编就给各位带来了鸿蒙炼炉讲解。或许各位都有用到天下HD的鸿蒙炼炉系统,但是各位又是否了解鸿蒙炼炉系统是怎么样的呢&#xf…

如何区分网线是几类的_小移课堂 | 网线这样选,网速才能嗖嗖的!

在家宅到长蘑菇的日子里最亲近的,除了家人,就是WiFi想必大家碰上网速不好的时候都会很抓狂为什么家里的网络明明签约的是千兆可网速一直上不去?网线,是卡住网速的关键因素!问网线不是通用的吗?还要用专门的网线吗&…

navicat premium 链接postgresql 无法加载表_PostgreSQL 每周新闻 2020311

PostgreSQL 每周新闻 2020-3-11英文原文地址:https://postgresweekly.com/issues/346Postgres子事务和性能本文展示了过度使用子事务对性能的影响,以及如何诊断在您的数据库里是否有这样的问题。Laurenz AlbePostgreSQL匿名器0.6:假名化和改进…

python无法打开_如何解决Windows命令行无法运行python文件?

我在使用windows的命令行运行python文件,但是每次出现的都是这种情况我设置了Path,D:Python,后来又设置了个PythonPath,添加了Lib和DLLS的路径,但是没用。 我觉得还是设置环境变量的问题,请问大家有什么办法…

iis7设置html支持asp,Win7下启用IIS7配置ASP运行环境的详细方法

第一次在windows7下配置IIS,虽然有丰富的xp下配置IIS的经验,但还是会遇到不少的问题。特别是对入门者来说,搞清一些东西还是挺费时间的。其实win7下的IIS7配置过程是非常简单的。下面让seo博客来详细的介绍一下win7下配置IIS7环境运行ASP网站…

java 手写阻塞队列_Java阻塞队列的实现

阻塞队列与普通队列的区别在于,当队列是空的时,从队列中获取元素的操作将会被阻塞,或者当队列是满时,往队列里添加元素的操作会被阻塞。试图从空的阻塞队列中获取元素的线程将会被阻塞,直到其他的线程往空的队列插入新…

python语句解释_深入理解python with 语句

深入理解python with 语句 python中with 语句作为try/finally 编码范式的一种替代, 适用于对资源进行访问的场合,确保不管使用过程中是否发生异常都会执行必要的”清理”操作,释放资源,比如文件使用后自动关闭、线程中锁的自动获取和释放等 1…

js怎么设置z index.html,HTML5 Canvas set z-index

j0kEli Stone提出了一个问题:HTML5 Canvas set z-index,或许与您遇到的问题类似。回答者markE给出了该问题的处理方式:Yes..kind of yes. You can use compositing to "draw behind" existing pixels.ctx.globalCompositeOperation…

python搭建分布式集群_Spark完全分布式集群搭建【Spark2.4.4+Hadoop3.2.1】

一.安装Linux需要:3台CentOS7虚拟机注意:虚拟机的网络设置为NAT模式,NAT模式可以在断网的情况下连接上虚拟机而桥架模式不行!二.设置静态IP跳转目录到:修改IP设置:备注:执行scp命令拷贝设置文件…

ajax post提交数据_详解Ajax异步加载

前言:作为资深球迷,提起Ajax,第一反应想到的是阿贾克斯,那个曾培养出伊布,范德法特,苏亚雷斯,亨特拉尔等一众球星的荷甲著名球队。很显然,我们今天说的Ajax,跟足球没有任…

win10改计算机用户名,win10系统修改本地账号用户名的操作方法

很多小伙伴都遇到过对win10系统修改本地账号用户名进行设置的困惑吧,一些朋友看过网上对win10系统修改本地账号用户名设置的零散处理方法,并没有完完全全明白win10系统修改本地账号用户名的操作方法非常简单,只需要1、首先打开Win10控制面板&…

2020 ccf推荐中文期刊_CCF推荐国际学术期刊

中国计算机学会推荐国际学术期刊(计算机系统与高性能计算)一、A类序号刊物简称刊物全称出版社网址1TOCSACM Transactions on Computer SystemsACM2TOCIEEE Transactions on ComputersIEEE3TPDSIEEE Transactions on Parallel and DistributedSystemsIEEE二、B类序号刊物简称刊物…

假设以带头结点的循环链表表示队列_关于反转链表,看这一篇就够了!

本期例题:LeetCode 206 - Reverse Linked List[1](Easy)反转一个单链表。示例:输入: 1->2->3->4->5->NULL输出: 5->4->3->2->1->NULL反转链表这道题是我在阿里的面试中遇到的题目。它本身也是单链表…

1650显卡学计算机,适合老电脑升级?GTX1650显卡开箱,性价比依然不高!

原标题:适合老电脑升级?GTX1650显卡开箱,性价比依然不高!新一代的NV显卡高端版本基本上全部和大家见面,例如RTX2080ti、RTX2070等等。而中端的RTX2060和GTX1660ti也陆续被玩家接受,剩下入门级的显卡英伟达取…

python参数类型_Python 参数类型和参数匹配模型

Python 方法的参数种类有很多,而不是通常语言定义的那样, Python 方法的传参能力要比想象的强大很多。很多初学者可能对一些库中带 * 带 ** 的参数类型非常奇怪,但是其实这些语法正是保证 Python 方法传参强大的重要因素。 First Thing 首先要…

city如何使用 mega unity_制作思路和CityEngine的简单使用

最近什么都不想干,就总结一下之前做过的一些东西。首先是建立一个虚拟城市,目前这个城市还在建造中,主要是用于自己的之后的动画和开放世界游戏制作,下面说以下自己之前的思路。说起城市建模,可以说是哗的一下一大堆可…

计算机网络结构有哪些,计算机网络主要拓扑结构有哪些

计算机网络的最主要的拓扑结构有总线型拓扑、环形拓扑、树形拓扑、星形拓扑、混合型拓扑以及网状拓扑。其中环形拓扑、星形拓扑、总线型拓扑是三个最基本的拓扑结构。在局域网中,使用最多的是星形结构。网络的拓扑结构:网络拓扑结构是指抛开网络电缆的物…

iphone怎样关闭副屏_iPhone手机关掉这3个设置,不仅省电,而且手机还不会卡

现在很多人无论是吃饭睡觉上厕所手机都会形影不离,然而手机玩久了电量就会刷刷的往下掉,不仅如此长时间下去手机还会出现卡顿的情况。如何才能令手机不卡顿并且最大限度上省电呢?为大家分享几个技巧,关掉这3个设置,手机…

wxpython按钮形状如何修改_Python图形化界面入门教程 - 使用wxPython自定义表

原标题:Python图形化界面入门教程 - 使用wxPython自定义表 来自: Linux迷 网址:https://www.linuxmi.com/python-gui-wxpython-zidingyi-biao.html 在此Python GUI中,我们学习下在wxPython中显示“定制表” 。在第一部分中&#x…

武汉大学计算机考研 专业课程,2018武汉大学计算机考研复试经验贴

2018武汉大学计算机考研复试经验贴武汉大学发布于2019年9月22日 12:25阅读数 18196初试唯一要讲的就是专业课问题,今年专业课改革,只考两门专业课。一门是数据结构,分值为90分,只有选择题和代码题,大概24个选择题&…