Vue.js生命周期

最新推荐文章于 2023-02-23 18:13:00 发布

End_less__

最新推荐文章于 2023-02-23 18:13:00 发布

阅读量256

点赞数

分类专栏： Vue.js学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/89856885

版权

Vue.js学习专栏收录该内容

22 篇文章 1 订阅

订阅专栏

代码展示如下：

<!-- 
  @Author:  Mr.J
  @Date: 2019-05-05 22:31:35 
  @Last Modified by:   Mr.J
  @Last Modified time: 2019-05-05 22:31:35 
  -->

<!DOCTYPE html>
<html>

<head>
    <title>Vue生命周期</title>
    <script src="vue.js"></script>
</head>
<body>

    <div id="app">
        <p v-color="'rgb(67, 2, 128)'" v-fontsize="30">{{msg}}</p>
    </div>

    <script type="text/javascript">

        // 使用 Vue.directive()定义全局指令
        Vue.directive('color', {
            bind: function (el, binding) {
                el.style.color = binding.value;
            },
        });
        var app = new Vue({
            el: '#app',
            data: {
                msg: "Congratulation!  you have one message"
            },
            beforeCreate: function () {
                console.group('beforeCreate 创建前状态');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
                console.log("%c%s", "color:red", "message: " + this.message)
            },
            created: function () {
                console.group('created 创建完毕状态');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            beforeMount: function () {
                console.group('beforeMount 挂载前状态');
                console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
            },
            mounted: function () {
                console.group('mounted 挂载结束状态 ');
                console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
            },
            directives: {//自定义私有指令
                'fontsize': function (el, binding) {
                    el.style.fontSize = parseInt(binding.value) + 'px';
                },
            }
        })
    </script>
</body>

</html>

页面结果：

End_less__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
Vue.js生命周期

代码展示如下：<!DOCTYPE html><html><head> ...
复制链接

扫一扫