(四)Vue的生命周期

本节知识点

Vue里面一共有10个声明
代码概括

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
       <div>{{message}}</div>
      <button @click="add">加分</button>
  </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:1
        },
        methods:{
            add:function(){
                this.message++;
            }
        },
        //下面是10个钩子函数
        beforeCreate:function(){
            console.log("1--beforecreate 初始化之后")
        },
        created:function(){
            console.log("2--created创建之后")
        },
        beforeMount:function(){
            console.log("3--beforeMount挂载之前")
        },
        mounted:function(){
            console.log("4--mounted 挂载之后")
        },
        beforeUpdate:function(){
            console.log("5--update 更新之前");
        },
        updated:function(){
            console.log("6--更新之后");
        },
        activated:function(){
            console.log("7--组件被激活的时候使用");
        },
        deactivated:function(){
            console.log("8--组件被移除的时候使用")
        },
        beforeDestroy:function(){
            console.log("9--销毁前使用")
        },
        destroyed:function(){
            console.log("10--销毁后使用")
        }

    })
</script>
</html>
(四)Vue的生命周期

本节知识点

代码概括

推荐阅读更多精彩内容
