window.onload、$(document).ready()、Vue.created() 页面加载完成后执行方法

1、JavaScript 的 window.onload 方法

window.onload 方法是在页面所有元素(包括图片、样式、链接等)加载完成后触发的,在这个事件之前,页面上的所有资源都必须加载完成。因此,如果页面中包含大量的图片或其他资源,那么 window.onload 事件可能比较晚触发,可能需要等待几秒钟或更长时间才会被触发。这意味着在使用 window.onload 时需要等待所有的资源加载完成后才能执行相应的 JavaScript 代码,可能会影响用户体验。

**使用方式一:**将 onload 事件写在 <body> 标签中。

html 复制代码
<body onload="myFun()">
</body>

<script type="text/javascript">
    function myFun() {
        document.write("<h3>您好,欢迎访问 pan_junbiao的博客</h3>");
        document.write("<h3>https://blog.csdn.net/pan_junbiao</h3>");
    }
</script>

**使用方式二:**将 window.onload 写在 <script> 标签中。

html 复制代码
<script type="text/javascript">
    window.onload = function () {
        myFun();
    }

    function myFun() {
        document.write("<h3>您好,欢迎访问 pan_junbiao的博客</h3>");
        document.write("<h3>https://blog.csdn.net/pan_junbiao</h3>");
    }
</script>

执行结果:

2、JQuery 框架的 $(document).ready()

JQuery 框架的 $(document).ready() 方法和 window.onload 方法有相似的功能,但是在执行时机方面时有区别的。window.onload 方法是在页面中所有元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即 JavaScript 此时才可以访问页面中的任何元素。而通过 JQuery 中的 $(document).ready() 方法注册的事件处理程序,在 DOM 完全就绪时就可以被调用。此时,页面的所有元素对 JQuery 而言都是可以访问的,但是,这并不意味着这些元素关联的文件都已经下载完毕。

html 复制代码
<!-- 引用 jquery 包 -->
<script src="../js/jquery-3.4.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        //执行方法
    });
</script>

3、Vue 框架的 created() 钩子函数

Vue 框架为每个应用程序实例在创建时都有一系列的初始化步骤,例如:创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫作生命周期钩子的函数,通过这些钩子函数可以定义业务逻辑。

Vue.created() 钩子函数是在实例创建之后进行调用,此时尚未开始 DOM 编译。在需要初始化处理一些数据时会比较有用。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 框架的 created() 钩子函数</title>
</head>

<body>
    <div id="app">
        <h3>{{title}}</h3>
        <p>{{blogInfo}}</p>
        <p>{{blogUrl}}</p>
    </div>
</body>
<!-- 引用 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<!-- 使用 Vue.createApp 函数创建一个应用程序实例-->
<script type="text/javascript">
    const vueApp = Vue.createApp({
        data() {
            return {
                title: '',
                blogInfo: '',
                blogUrl: ''
            }
        },
        // 使用 created 生命周期的钩子函数,初始化页面信息
        created: function () {
            this.title = "使用 Vue 框架的 created() 钩子函数初始化页面数据:";
            this.blogInfo = "您好,欢迎访问 pan_junbiao的博客";
            this.blogUrl = "https://blog.csdn.net/pan_junbiao";
        }
        //装载应用程序实例的根组件
    }).mount('#app');
</script>

</html>

执行结果:

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript