<!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. 动态规划专题（五）——斜率优化DP

    前言 斜率优化\(DP\)是难倒我很久的一个算法,我花了很长时间都难以理解.后来,经过无数次的研究加以对一些例题的理解,总算啃下了这根硬骨头. 基本式子 斜率优化\(DP\)的式子略有些复杂,大致可以 ...

  2. 【BZOJ3106】[CQOI2013] 棋盘游戏（对抗搜索）

    点此看题面 大致题意: 在一张\(n*n\)的棋盘上有一枚黑棋子和一枚白棋子.白棋子先移动,然后是黑棋子.白棋子每次可以向上下左右四个方向中任一方向移动一步,黑棋子每次则可以向上下左右四个方向中任一方 ...

  3. CUDA：Supercomputing for the Masses (用于大量数据的超级计算)-第三节

    原文链接 第三节:错误处理和全局内存性能局限 恭喜!通过对CUDA(Compute Unified DeviceArchitecture,即计算统一设备架构的首字母缩写)系列文章第一节和第二节,您现在 ...

  4. C#装箱与拆箱的研究

    在对这个问题展开讨论之前,我们不妨先来问这么几个问题,以系统的了解我们今天要探究的主题. 观者也许曾无数次的使用过诸如System.Console类或.NET类库中那些品种繁多的类.那么,我想问的是它 ...

  5. git系列讲解

    1.git是什么呢?维基百科给出的定义: git是一个分布式版本控制软件,最初由(Linus Torvalds)创作 什么是版本控制?项目经理与程序员的恩怨情仇企业真实案例:开发了a功能,之后项目所要 ...

  6. AngularJS1.X版本双向绑定九问

    前言 由于工作的原因,使用angular1.x版本已经有一段时间了,虽然angualr2升级后就完全重构了,但每个版本存在也有一定的道理.话不多说,进入正题. 1.双向绑定的原理是什么? Angual ...

  7. GVIM——简直美如画，有没有！

    "========================================== " Author: wklken " Version: 9.1 " Em ...

  8. 【NTT】loj#6261. 一个人的高三楼

    去年看过t老师写这题博客:以为是道神仙题 题目大意 求一个数列的$k$次前缀和.$n\le 10^5$. 题目分析 [计数]cf223C. Partial Sums 加强版.注意到最后的式子是$f_i ...

  9. swpan&expect交互脚本

    #!/usr/bin/expectset timeout 30set user USERNAMEset pass PASSWORDspawn sudo pg_dump npi -U admin -p ...

  10. 文档对象模型 DOM

    1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...