开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >vue页面加载完毕之后执行

vue页面加载完毕之后执行

作者头像

阿超

发布于 2022-08-16 12:28:20

发布于 2022-08-16 12:28:20

9.6K00

代码可运行

举报

文章被收录于专栏：快乐阿超快乐阿超

运行总次数：0

代码可运行

好奇心造就科学家和诗人。——法朗士

当vue页面加载完成后触发

我们在html开发中经常是使用window.onload实现

window.onload = () => {
    
}

但在vue中我们使用this.$nextTick

this.$nextTick(() => {
    console.log("页面加载完啦~")
})

效果如下

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-06-20，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

browser ip live nlp web

希望每家做产品的公司都能给出同类型产品的横向对比，毕竟自家是对自己产品定位最清楚的，优化消费者的购物体验也是传达品牌自信和品牌信誉的关键。

孔西皮

2021/03/04

2400

addLoadEvent方法解析

onload方法在网页加载完毕时，会自动执行，但是该方法有个缺点就是只能执行一个方法。　　onload的限制　　比如下面的代码： <script type="text/javascript"> function func1(){ console.log("this is func1()"); } function func2(){ console.

用户1154259

2018/01/17

7240

addLoadEvent方法解析

$(document).on和$('#idname').on和$(function(){ })区别

jquery 网站编程算法

　　在写前端的时候经常用到js或jquery语法，有时候傻傻分不清，现在将学习过程中遇到的总结一下。

全栈测试开发日记

2023/02/02

2.3K0

$(document).on和$('#idname').on和$(function(){ })区别

大厂前端面试考什么?

html html5 编程算法 http access

浏览器的渲染进程的线程总共有五种：（1）GUI渲染线程负责渲染浏览器页面，解析HTML、CSS，构建DOM树、构建CSSOM树、构建渲染树和绘制页面；当界面需要重绘或由于某种操作引发回流时，该线程就会执行。

loveX001

2022/11/17

1.4K0

Vue.js的图片加载性能优化你可以试试

javascript vue.js element ui

图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。

Vam的金豆之路

2021/11/30

2K0

从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

jquery java html

JavaScript 开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

Daotin

2018/08/31

2K0

vue项目iframe的传值问题

　　所以。我把插件的使用封装了一个html页面。vue项目则利用iframe的方式引入。

Dawnzhang

2019/11/21

1.9K0

Vue（五）计算属性、过滤器、axios、vue 生命周期

vue.js ajax javascript node.js 缓存

自己不保存属性值，而是根据其他属性的属性值，动态计算出自己的属性值。如果页面上需要一个值，但是这个值不是直接给的，需要经过复杂的计算过程才能获得时，都用计算属性。

全栈程序员站长

2022/11/01

2K0

Vue（五）计算属性、过滤器、axios、vue 生命周期

捕获用户在该页面停留的时长，我是这样做的（前端监测）

在监测功能的时候，我们首要考虑的就是，我们的监测代码不能影响我们现在的业务代码，和以后的业务代码。

coder_koala

2021/01/06

4.5K0

捕获用户在该页面停留的时长，我是这样做的（前端监测）

JS完美收官之——js加载时间线

javascript node.js

浏览器在开始运行一个页面的时候，首先它会初始化js功能，当js发挥它的功能时候，记录了一系列浏览器按照顺序做的事情，也就是一个执行顺序，谁在谁之前发生，谁在谁之后发生。

程序员法医

2022/08/11

1.5K0

JS完美收官之——js加载时间线

最近面试被问到的vue题

vue.js 渲染缓存编程算法

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速

bb_xiaxia1998

2022/11/16

7400

从零开始学 Web 之 BOM（一）BOM的概念，一些BOM对象

window 是浏览器的顶级对象，当调用 window 下的属性和方法时，可以省略 window。

Daotin

2018/08/31

8080

JavaScript 学习-29.HTML DOM 事件

jquery html css 腾讯云测试服务

前言 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。常用的一些事件事件名称作用 onload 通常用于元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。 onunload 用户退出页面。( 和 ) onclick 当用户点击某个对象时调用的事件句柄。 onmouseover 鼠标移到某元素之上。 onmouseout 鼠标从某元素移开。 ondblclick 当用户双击某个对象时调用的事件句柄。 onkeydown 某个键盘按键被按下。

上海-悠悠

2022/05/30

1.2K0

JavaScript 学习-29.HTML DOM 事件

前端性能和错误监控

这几天心血来潮，想了解一下前端监控的相关知识，可是在查看了很多资料之后，发现没有详细介绍前端监控的相关文章，都是讲个大概，反倒是现成的前端监控工具有不少。

谭光志

2020/09/28

1.7K0

HTML解析之DOMContentLoaded和onload

html javascript node.js css

在很久很久以前，我在封装自己的JQuery库时就使用过DOMContentLoaded，觉得这个知识点看看别的文章就行了，不过现在我想把它记下来。

全栈程序员站长

2022/11/16

1.8K0

HTML解析之DOMContentLoaded和onload

jQuery页面加载完毕后执行事件

jquery css html

window.onload 表示的是页面被加载完毕。 <img src=”htttp://baidu.com/156.jpg”/> onload必须等等页面中的图片、声音、图像等远程资源被加载完毕后才调用而jQuery中只需要页面结构被加载完毕。

葆宁

2019/04/19

22K1

前端面试题汇总

缓存 css javascript vue.js http

：解析渲染该过程主要分为以下步骤：a.解析HTML b. 构建DOM树 c.DOM树与CSS样式进行附着构造呈现树 d.布局 e.绘制

EchoROne

2022/08/15

3.1K0

前端知识普及之页面加载

如果大家想继续看下面的内容的话，有一个要求，就是回答我一个问题: 你这样写过代码吗？ window.onload = function(){ $(".gravatar").on('click',function(){ //... }); //以及其他操作DOM的节点 } 如果答案是 yes. 那么，bingo, 这里我们将深入讲解，这样写代码到底有没有IQ。如果答案是 No. 那么，2333333, 你也可以看一下。万一哪天用上了呢？可能会有童鞋反问，那么，我

前朝楚水

2018/04/02

1.8K0

前端路由的实现原理

php vue.js 网站编程算法 html

路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。

Daotin

2019/07/28

2.3K0

Vue为何采用异步渲染

vue.js 渲染 javascript node.js

Vue在更新DOM时是异步执行的，只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，如果同一个watcher被多次触发，只会被推入到队列中一次，这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的，然后，在下一个的事件循环tick中，Vue刷新队列并执行实际(已去重的)工作，Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，则会采用setTimeout(fn, 0)代替。

WindRunnerMax

2021/02/25

2.1K1

相关推荐

Journal:2020-1

更多 >

一站式MCP教程库，解锁AI应用新玩法

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手