Vue的生命周期-运行阶段

最新推荐文章于 2024-07-25 09:24:40 发布

YY小怪兽

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量92

点赞数

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

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

版权

Vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

详情可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>69-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>

<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        beforeUpdate:function(){
            /*
            在调用beforeUpdate的时候, 表示Vue实例中保存的数据被修改了
            注意点: 只有保存的数据被修改了才会调用beforeUpdate, 否则不会调用
            注意点: 在调用beforeUpdate的时候, 数据已经更新了, 但是界面还没有更新
            * */
            // console.log("beforeUpdate");
            // console.log(this.msg);
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        updated:function(){
            /*
            在调用updated的时候, 表示Vue实例中保存的数据被修改了, 并且界面也同步了修改的数据了
            也就是说: 数据和界面都同步更新之后就会调用updated
            * */
            console.log(this.msg);
            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>69-Vue-生命周期方法</title> <script src="js/vue.js"></script></head><body><!--1.什么是生命周期方法?和wbpack生命周期方法一样,
复制链接

扫一扫

专栏目录