<!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. IOS tabelView退出键盘

    /** *当开始拖拽表格的时候就会调用 * */ -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { //退出键盘 [sel ...

  2. Softmax回归（Softmax Regression

    多分类问题 在一个多分类问题中,因变量y有k个取值,即.例如在邮件分类问题中,我们要把邮件分为垃圾邮件.个人邮件.工作邮件3类,目标值y是一个有3个取值的离散值.这是一个多分类问题,二分类模型在这里不 ...

  3. js日期类型date

    javascript语言核心包括Date()构造函数,用来创建表示日期和时间的函数 //返回当前的日期和时间      var today = new Date();      //2011年1月1日 ...

  4. css3媒体查询中device-width和width的区别

    1.device-width 定义:定义输出设备的屏幕可见宽度. 不管你的网页是在safari打开还是嵌在某个webview中,device-width都只跟你的设备有关,如果是同一个设备,那么他的值 ...

  5. 2017年9月11日 梁勇 java教材 编程练习题 第二章 2.15 键盘 读取两个点的坐标值（小数），控制台输出两点间距离。

    package com.swift; import java.util.Scanner; public class PToP { public static void main(String[] ar ...

  6. 虚拟机Linux_Mint中安装vmtools增强工具

    一开始用VmwarePro安装Linux系统时,系统的整体界面会缩在屏幕中间的一小块区域内.如图: ​ 看的会非常吃力.为了更好的解决这个问题,就需要安装Vmtools增强工具.安装步骤如下: 1. ...

  7. 笔试算法题（46）：简介 - 二叉堆 & 二项树 & 二项堆 & 斐波那契堆

    二叉堆(Binary Heap) 二叉堆是完全二叉树(或者近似完全二叉树):其满足堆的特性:父节点的值>=(<=)任何一个子节点的键值,并且每个左子树或者右子树都是一 个二叉堆(最小堆或者 ...

  8. 回数是指从左向右读和从右向左读都是一样的数，例如 12321 ， 909 。请利用 filter() 滤掉非回数

    不管在什么地方,什么时候,学习是快速提升自己的能力的一种体现!!!!!!!!!!! 最近一段时间学习了廖雪峰老师学的Python学习资料,给自己的帮助很大,同时也学到的了很多,今天做了一道练习题,对于 ...

  9. Linux-SSH远程登陆

    SSH是什么 Secure Shell 安全外壳协议 建立在应用层基础上的安全协议 可靠.转为远程登陆会话和其他网络提供安全性的协议 SSH客户端是用于多种平台 服务器安装SSH服务 安装:yum i ...

  10. tcl之list操作-lappend/lsearch/lsort/concat/split/join/