<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>构造器的声明周期</title>
</head>
<body>
    <h1>构造器的声明周期</h1>
    <hr>
    <div id="app">
        {{message}}
        <p><button @click="jia">加分</button></p>
    </div>
        <button onclick="app.$destroy()">销毁</button>
 
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:1
            },
            methods:{
                jia:function(){
                    this.message ++;
                }
            },
            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-beforeUpdate 数据更新前');
            },
            updated:function(){
                console.log('6-updated 被更新后');
            },
            activated:function(){
                console.log('7-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 销毁之前');
            },
            destroyed:function(){
                console.log('10-destroyed 销毁之后')
            }
 
        })
    </script>
</body>
</html>

Vue2.0 - 生命周期的更多相关文章

  1. vue2.0 生命周期 简析

    Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...

  2. Vue2.0生命周期和钩子函数的一些理解

    转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...

  3. Vue2.0 —生命周期和钩子函数

    vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...

  4. 详解Vue2.0生命周期

    网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...

  5. vue2.0生命周期

    https://www.cnblogs.com/goloving/p/8616989.html(copy )

  6. vue2.0生命周期详解

    首先上图展 <template> <div id="home"> <p>{{ message }}</p> </div> ...

  7. 02Vue2.0+生命周期

    Vue生命周期是Vue对象从无到有再到无的一个过程,我们又是不仅要明白一个对象的使用, 同时也要知道一个对象怎么创建了,就比如Spring的生命周期,往往不只是面试官的考点, 同时在项目中也也可能常常 ...

  8. Vue 2.0 生命周期-钩子函数理解

    Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...

  9. vue2.x生命周期

    vue2.x生命周期 1. beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. 2. created 实例已经创建 ...

随机推荐

  1. Handling Exceptions

    https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/Exceptions/Tasks/Handling ...

  2. 【转载】LCT题单

    本篇博客的题单转载自FlashHu大佬的博客:LCT总结--应用篇(附题单)(LCT). 关于\(LCT\)可以查看这篇博客:\(LCT\)入门. 这里面有些题解的链接是空链接,尚未补全. 维护链信息 ...

  3. ifup/ifdown ethX 和 ifconfig ehtX up/down的区别

    相同点:[启用]和[禁止]网卡 ifup  ethX 和 ifconfig  ethX  up               用来启用网卡设备 ifdown  ethX 和 ifconfig  ethX ...

  4. 最近面试前端岗位，汇总了一下前端面试题（JS+CSS）

    JavaScript 运行机制 1. 单线程(用途决定,需要与用户互动以及操作DOM) 2. 分同步任务(主线程)与异步任务(任务队列),只有任务队列通知主线程某个任务可以执行了,该 任务才会进入主线 ...

  5. tk.mybatis Example 多个or条件拼接

    //需要的查询条件为 a and (b or c or d) 可以转换为 (a and b) or (a and c) or (a and d) private Example madeExample ...

  6. Ubuntu下安装pip3和Python的第三方库

    一.Ubuntu原有环境说明 无论是在服务器上面还是在我们自己的电脑上面,当我们成功安装了Ubuntu系统之后,系统一般情况下会自带Python2.x和Python3.x环境.比如我在自己的阿里云服务 ...

  7. AngularJS 数字

    AngularJS数字就像JavaScript数字 AngularJS实例: <!DOCTYPE html><html><head><meta http-eq ...

  8. Vimim是VI中最好的输入法

    Vimim是VI中最好的输入法 由于在VI中,normal和insert模式的存在,如果在insert模式下正在输入中文,在通过ESC键返回到normal模式后,系统的中文输入法会与VI的命令相冲突, ...

  9. 【线性基 集合hash】uoj#138. 【UER #3】开学前的涂鸦

    还需要加强分析题目特殊性质,设计对应特殊算法,少想多写大力dfs剪枝不要管MLETLE直接上的能力 红包是一个有艺术细胞的男孩子. 红包由于NOI惨挂心情不好,暑假作业又多,于是他开始在作业本上涂鸦. ...

  10. 认识mysql(1)

    ---恢复内容开始--- 1.MySQL概述 1.什么是数据库? 存储数据的仓库 2.都有哪些公司在用数据库? 金融机构.游戏公司.购物网站.论坛网站... 3.提供数据库服务的软件? 1.软件分类 ...