vue 基础生命周期与运行顺序

最新推荐文章于 2024-07-19 10:30:06 发布

这个网名好记

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量64

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_46188775/article/details/120516110

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <h3>{{msg}}</h3>
    <h1>{{test(111)}}</h1>
    <button @click="del()">销毁对象实例</button>
</div>
<script>
   var obj = new Vue({
        el:'#app',
        data:{
            msg:222,
        },
        methods:{
            test(string) {
                console.log(string);
                return string;
            },
            del(){ //销毁对象实例
              obj.$destroy();
            }
        },
        beforeCreate(){
            console.log('创建前，无法调用methods和查看data数据')
        },
        created(){
          console.log('创建后，无法调用methods和查看data数据')
        },
        beforeMount(){
            console.log('挂载前，还没生成真实dom');
        },
        mounted(){
          console.log('挂载后，已经生成真实dom');
        },
        beforeUpdate(){
            console.log('页面数据更新，之前运行');
        },
        updated(){
            console.log('页面数据更新完成');
        },
        beforeDestroy(){
            console.log('销毁对象实例之前调用');
        },
        destroyed(){
            console.log('销毁对象实例的最后一步');
        }
    });
</script>
</body>
</html>

这个网名好记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 基础生命周期与运行顺序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>生命周期</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="ap.
复制链接

扫一扫