vue 的生命周期初次尝试

最新推荐文章于 2024-07-10 20:00:00 发布

前端程序员雾灵

最新推荐文章于 2024-07-10 20:00:00 发布

阅读量147

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/XINpxXIN/article/details/107056644

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue 生命周期

效果显示图

全部代码

<!--
 * @Descripttion: 🐉vue生命周期
 * @Author: xinxinp
 * @Date: 2020-07-01 05:47:25
 * @LastEditTime: 2020-07-01 09:14:37
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue生命周期演示</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" name="" v-model="msg" id="">
        {{ msg }}
        <button @click="destoryCom">销毁组件</button>
    </div>
</body>
<script >
    const app = new Vue({
        el:"#box",
        data:{
            msg:'123'
        },
        methods: {
            destoryCom(){
                this.$destroy()
            }
        },
        beforeCreate() {
            console.log(`%c beforeCreate`, "color:red;font-size:20px");
            
        },
        created() {
            console.log(`%c created`, "color:green;font-size:20px");
        },

        beforeMount(){
            console.log(`%c beforeMount`, "color:red;font-size:20px");
        },
        mounted() {
            console.log(`%c mounted`, "color:green;font-size:20px");
        },
        beforeUpdate() {
            console.log(`%c beforeUpdate`, "color:red;font-size:20px");
        },
        updated() {
            console.log(`%c updated`, "color:blue;font-size:20px");
        },
        beforeDestroy() {
            console.log(`%c beforeDestroy`, "color:red;font-size:20px");
        },
        destroyed() {
            console.log(`%c destroyed`, "color:green;font-size:20px");
        },
    });
</script>
</html>

关注我，了解更多有趣的小工具

在这里插入图片描述

欢迎你的宝贵建议 github地址

前端程序员雾灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 的生命周期初次尝试

vue 生命周期效果显示图全部代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
复制链接

扫一扫

专栏目录