<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

</head>

<body>

    <div id="box">

        {{msg}}     <!-- 要去编译 -->

    </div>

    <script>

        new Vue({  //创建实例。以下2.0会不一样

            el:'#box',

            data:{

                msg:'well'

            },

            created:function(){  //new Vue()成功以后

                alert('实例已经创建');    //创建完之后再编译

            },

            beforeCompile:function(){

                alert('编译之前');

            },

            compiled:function(){

                alert('编译之后');

            },

            ready:function(){    //编译之后插入到文档，{{msg}}文本节点添加到文档中，显示{{msg}}，

                alert('插入到文档中');

            }

        });

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

</head>

<body>

    <div id="box">

        {{msg}}

    </div>

    <script>

        var vm=new Vue({

            el:'#box',

            data:{

                msg:'well'

            },

            created:function(){

                alert('实例已经创建');

            },

            beforeCompile:function(){

                alert('编译之前');

            },

            compiled:function(){

                alert('编译之后');

            },

            ready:function(){

                alert('插入到文档中');

            },

            beforeDestroy:function(){

                alert('销毁之前');

            },

            destroyed:function(){

                alert('销毁之后');

            }

        });

        /*点击页面销毁vue对象*/

        document.onclick=function(){

            vm.$destroy();

        };

    </script>

</body>

</html>

vue8 生命周期的更多相关文章

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  3. C# MVC 5 - 生命周期（应用程序生命周期&请求生命周期）

    本文是根据网上的文章总结的. 1.介绍 本文讨论ASP.Net MVC框架MVC的请求生命周期. MVC有两个生命周期,一为应用程序生命周期,二为请求生命周期. 2.应用程序生命周期 应用程序生命周期 ...

  4. UIViewController生命周期-完整版

    一.UIViewController 的生命周期 下面带 (NSObject)的方法是NSObject提供的方法.其他的都是UIViewController 提供的方法. load   (NSObje ...

  5. angular2系列教程（十一）路由嵌套、路由生命周期、matrix URL notation

    今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:

  6. Spring中Bean的作用域、生命周期

                                   Bean的作用域.生命周期 Bean的作用域 Spring 3中为Bean定义了5中作用域,分别为singleton(单例).protot ...

  7. Autofac - 生命周期

    实例生命周期决定在同一个服务的每个请求的实例是如何共享的. 当请求一个服务的时候,Autofac会返回一个单例 (single instance作用域), 一个新的对象 (per lifetime作用 ...

  8. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  9. Xamarin.Android活动的生命周期

    一.前言 用过Android手机的人一定会发现一种现象,当你把一个应用置于后台后,一段时间之后在打开就会发现应用重新打开了,但是之前的相关的数据却没有丢失.可以看出app的“生命”是掌握在系统手上的, ...

随机推荐

  1. Iterator（迭代器） 和generator

    数组是可迭代的 var a = []; console.dir(a); 发现这里有一个Symbol.iterator ,说明它是可迭代的. object 是不可以迭代的 var a = {} cons ...

  2. Python 中多线程之 _thread

    _thread模块是python 中多线程操作的一种模块方式,主要的原理是派生出多线程,然后给线程加锁,当线程结束的 时候取消锁,然后执行主程序 thread 模块和锁对象的说明 start_new_ ...

  3. centeros 7开机自动挂载磁盘

    场景: 使用mount命令将新发现的磁盘/dev/sdb挂载给/liu后,但是重启后又看不到磁盘? 问题导致原因: 虽然我们可以使用mount命令去挂载磁盘,但是此操作只对服务器运行期间有效,也就是临 ...

  4. 关于iptables允许samba的问题

    今天同事跟我说他们部门的共享不能用了,想了想,最近变更的只有iptables,于是看看是否是这个原因,发现没有允许samba的入站和出站规则,我的iptables规则默认是所有都drop的,但是不知确 ...

  5. CAD二次开发（01）-绘制直线

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. 【codeforces 367C】Sereja and the Arrangement of Numbers

    [题目链接]:http://codeforces.com/problemset/problem/367/C [题意] 我们称一个数列a[N]美丽; 当且仅当,数列中出现的每一对数字都有相邻的. 给你n ...

  7. [terry笔记]11gR2_dataguard_主备库切换

    主备库切换  Switchover  一般SWITCHOVER切换都是计划中的切换,特点是在切换后,不会丢失任何的数据,而且这个过程是可逆的,整个DATA GUARD环境不会被破坏,原来DATA GU ...

  8. 传纸条 NOIP2008 洛谷1006 二维dp

    二维dp 扯淡 一道比较基本的入门难度的二维dp,类似于那道方格取数,不过走过一次的点下次不能再走(看提交记录里面好像走过一次的加一次a[i][j]的也AC了,,),我记得当年那道方格取数死活听不懂, ...

  9. Asterisk[1]

    Asterisk[1]是一款GPLv2协议下的开源电话应用平台.简单来说,Asterisk是一个server应用.可以完毕发起电话呼叫.接受电话呼叫.对电话呼叫进行定制处理. 1.2.1 通道驱动 a ...

  10. 面试题：Student s = new Student();在内存中做了哪些事情?即创建一个对象做了哪些事情

    lStudent s = new Student();在内存中做了哪些事情? •载入Student.class文件进内存(方法区) •在栈内存为s开辟空间 •在堆内存为学生对象开辟空间 •对学生对象的 ...