zoukankan html css js c++ java

Vue2.0的生命周期

什么是钩子？

大白话就是一系列的内部方法

下面是一张生命周期钩子的说明图

下面是一段代码测试

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h3>{{message}}</h3>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message:"hello Vue!"
        },
        beforeCreate:function(){
            console.log("1.0 beforeCreate",this.message);
        },
        created:function(){
            console.log("2.0 created",this.message);
        },
        beforeMount:function(){
            console.log("3.0 beforeMount",this.message);
        },
        mounted:function(){
            console.log("4.0 mounted",this.message);
        }
      })
    </script>
  </body>
</html>

执行结果

查看全文

相关阅读:
程序员修炼之道:从小工到专家有感2
3月13日
 第一次结对作业（2）
3月12日
 3月11日
 第一次结对作业
 3月10日
 11月6日
 10月28日
 10月7日

原文地址：https://www.cnblogs.com/fengxiongZz/p/8071852.html