Vue的生命周期-创建阶段

最新推荐文章于 2022-11-26 14:54:23 发布

YY小怪兽

最新推荐文章于 2022-11-26 14:54:23 发布

阅读量268

点赞数

分类专栏： Vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lihui61357457/article/details/121730757

版权

Vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

详情可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>68-Vue-生命周期方法</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是生命周期方法?
和wbpack生命周期方法一样, 都是在从生到死的特定阶段调用的方法
PS: 生命周期钩子 = 生命周期函数 = 生命周期事件
2.Vue生命周期方法分类
2.1创建期间的生命周期方法
    beforeCreate:
    created:
    beforeMount:
    mounted:
2.2运行期间的生命周期方法
    beforeUpdate:
    updated:
2.3销毁期间的生命周期方法
    beforeDestroy:
    destroyed：
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <p>{{msg}}</p>
</div>
<!--
<div id="app">
    <p>小灰灰</p>
</div>
-->

<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        beforeCreate:function(){
            /*
            在调用beforeCreate的时候, 仅仅表示Vue实例刚刚被创建出来
            此时此刻还没有初始化好Vue实例中的数据和方法, 所以此时此刻还不能访问Vue实例中保存的数据和方法
            * */
            // console.log(this.msg);
            // console.log(this.say);
        },
        created:function(){
            /*
            在调用created的时候, 是我们最早能够访问Vue实例中保存的数据和方法的地方
            * */
            // console.log(this.msg);
            // console.log(this.say);
        },
        beforeMount:function(){
            /*
            在调用beforeMount的时候, 表示Vue已经编译好了最终模板, 但是还没有将最终的模板渲染到界面上
            * */
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        mounted:function(){
            /*
            在调用mounted的时候, 表示Vue已经完成了模板的渲染, 表示我们已经可以拿到界面上渲染之后的内容了
            * */
            console.log(document.querySelector("p").innerHTML);
            console.log(document.querySelector("p").innerText);
        },
        el: '#app',
        // 专门用于监听数据变化的
        watch: {
        },
        // 这里就是MVVM中的Model
        data: {
            msg: "小灰灰"
        },
        // 专门用于存储监听事件回调函数
        methods: {
            say(){
                console.log("say");
            }
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        }
    });
</script>
</body>
</html>

在这里插入图片描述

YY小怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的生命周期-创建阶段

详情可见<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>68-Vue-生命周期方法</title> <script src="js/vue.js"></script></head><body><!--1.什么是生命周期方法?和wbpack生命周期方法一样,
复制链接

扫一扫