<!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. 6、DRN-----深度强化学习在新闻推荐上的应用

    1.摘要: 提出了一种新的深度强化学习框架的新闻推荐.由于新闻特征和用户喜好的动态特性,在线个性化新闻推荐是一个极具挑战性的问题. 虽然已经提出了一些在线推荐模型来解决新闻推荐的动态特性,但是这些方法 ...

  2. mysql和mongodb的区别

    1.mongodb的概括 MongoDB(文档型数据库):提供可扩展的高性能数据存储 2.mongodb的功能概括 (1)基于分布式文件存储 (2)高负载情况下添加更多节点,可以保证服务器性能 (3) ...

  3. LayUI加载js无效问题

    在部署系统的时候,本地调试一切正常,layer.js均能正常加载.然而部署到服务器之后,经常性的出现layer.js无法加载问题.导致页面弹框无法使用. 一开始以为是Google浏览器问题,因为刚刚更 ...

  4. 紫书 习题 11-12 UVa 1665 （并查集维护联通分量）

    这道题要逆向思维 反过来从大到小枚举, 就是在矩阵中一点一点加进去数字,这样比较 好操作, 如果正着做就要一点一点删除数字, 不好做. 我们需要在这个过程中维护联通块的个数, 这里用到了并查集. 首先 ...

  5. 转:强制Visual Studio以管理员身份运行

    Windows 8的一个既安全又蛋疼之处是UAC的行为被改变了.以往在Windows 7中,只要关闭了UAC,自己的帐号又是本机管理员组的,任何程序都会以管理员身份启动.然而,在Windows 8上, ...

  6. Java设置Client Socket链接Server超时时间

    Java设置Client Socket链接Server超时时间 学习了:http://blog.csdn.net/tterminator/article/details/52494141 http:/ ...

  7. 完毕乔布斯的梦想：一个免费wifi共享的乌托邦

    早在2007年推出iPhone时,乔布斯就提出这种如果:商业区与居民区的wifi路由器全民开放,实现与路人共享网络之便.能够想象,那算是一个wifi共享的乌托邦. 数年过去了,乔布斯的梦想依然没能全然 ...

  8. java 经常使用測试框架

    1. 经常使用单元化測试框架 junit4 , TestNG 能够通过注解 @Before @After @BeforeClass @AfterClass 分别作方法与类级的初始化与结束动作. tes ...

  9. 响应http报文中的Date属性与cookie过期时间的关系

    今天在測试.net时,发现一个莫名其妙的问题:cookie老是保存不到浏览器端; 经过细致的比对成功与不成功的报文,居然无意中发现好像Date与它有关系,这太让我意想不到了,从来不知道cookie保存 ...

  10. 转：移动建站工具（一）：分秒钟将Web网站移动化

      作者唐小引 移动建站工具Web移动化简易开发MobifyTOPMobile Joomla!MoFuseWordPress优化 摘要:时下移动端显然已是诸多企业都想要占领的重要阵地.但限于较小的屏幕 ...