2020-11-16 Vue的生命周期

最新推荐文章于 2024-08-13 11:36:10 发布

努力学习前端的小朋友

最新推荐文章于 2024-08-13 11:36:10 发布

阅读量93

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45665275/article/details/109728047

版权

Vue的生命周期

beforeCreate 初始化之前，data和msg中的数据不可被使用
created 数据初始化完成，data和msg中的数据已经初始化完成，可以进行访问使用，但是没有进行挂载
brforeMount 挂载之前，判断当前的实例所绑定的模板是谁
mounted 挂载完成
beforeUpdate 更新之前
updated 更新完成
beforeDestroy 销毁之前
destroyed 销毁完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue环境 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
</head>
<body>
    <!-- 模板 -->
    <div id="app">
        <div id="one" v-on:click="changeText" style="width: 200px;height: 200px; background-color: aquamarine;"></div>
        {{msg}}
    </div>
    <script>
        new Vue({
            el:'#app',  //指定一个模板
            data:{
                msg:'ajiao'
            },
            // 初始化之前
            // data和msg中的数据不可被使用
            beforeCreate(){
                console.log('beforeCreate')
            },
            // 数据初始化完成
            // data和msg中的数据已经初始化完成，可以进行访问使用
            // 初始化完成，但是没有进行挂载
            created(){
                // console.log(this.msg)
                // this.test()
                console.log('created')
                // console.log(document.getElementById('one'))
            },
            // 挂载之前
            // 判断当前的实例所绑定的模板是谁
            beforeMount(){
                console.log('beforeMount')
            },
            // 挂载完成
            mounted(){
                console.log('mounted')
            },
            // 更新之前
            beforeUpdate(){
                console.log(this.msg)
                console.log('beforeUpdate')
            },
            // 更新完成
            updated(){
                console.log('updated')
            },
            // 组件销毁之前 
            beforeDestory(){
                console.log('beforeDestory')
            },
            // 销毁完成 
            destroyed(){
                console.log('destroyed')
            },
            methods:{
                changeText(){
                    // this.msg = '你好'
                    if(this.msg=='ajiao'){
                        this.msg='你好'
                    }else if(this.msg=='你好'){
                        this.msg='ajiao'
                    }
                },
                test(){
                    console.log('test')
                },
            }
        })
    </script>
</body>
</html>

效果如图：
在这里插入图片描述

努力学习前端的小朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-11-16 Vue的生命周期

Vue的生命周期beforeCreate 初始化之前，data和msg中的数据不可被使用created 数据初始化完成，data和msg中的数据已经初始化完成，可以进行访问使用，但是没有进行挂载brforeMount 挂载之前，判断当前的实例所绑定的模板是谁mounted 挂载完成beforeUpdate 更新之前updated 更新完成beforeDestroy 销毁之前destroyed 销毁完成<!DOCTYPE html><html lang="en">
复制链接

扫一扫