<!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. [UVa10188]Automated Judge Script

    题目大意:叫你写一个判断答案的系统. 解题思路:模拟即可.AC条件为,答案条数相等,所有字符相等.PE条件为,答案条数可能不等,所有数字字符相等.其他为WA. UVa现在的C++已经不支持gets了, ...

  2. vue源码之响应式数据

    分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...

  3. python购物车系统

    购物车系统模拟:product_list = [ ('java',100), ('python',200), ('键盘',500), ('电脑',4000), ('mac Book',7000),]S ...

  4. CodeVS 1789 最大获利

    1789 最大获利 2006年NOI全国竞赛  时间限制: 2 s  空间限制: 128000 KB  题目等级 : 大师 Master       题目描述 Description 新的技术正冲击着 ...

  5. Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessException总结

    最新项目中遇到了 Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.Proces ...

  6. UVALIVE 4287 Proving Equivalences (强连通分量+缩点)

    题意:给定一个图,问至少加入多少条边能够使这个图强连通. 思路:首先求出这个图的强连通分量.然后把每个强连通分量缩成一个点.那么这个图变成了一个DAG,求出全部点的入度和出度,由于强连通图中每个节点的 ...

  7. MySql基础总结(1)

    对于MySql已经是第二次看了,这次基本的目的是将MySql系统的归纳一边,之前学MySql是将笔记写在本子上,以后不想总带着本子,所以再花点时间把笔记归纳在博客中. 下午已将安装步骤具体的写了.如今 ...

  8. ftoa浮点型转换成字符串

    #include <stdio.h> bool ftos(float num,char *s,int n) {     int temp; float t=num; int pn=0; b ...

  9. spfile

    1 让ORACLE自己主动从spfile启动  SQL> create spfile='/dev/vx/rdsk/vgora/lv_spfile' from pfile;  SQL> sh ...

  10. [poj 2912] Rochambeau 解题报告 (带权并查集)

    题目链接:http://poj.org/problem?id=2912 题目: 题目大意: n个人进行m轮剪刀石头布游戏(0<n<=500,0<=m<=2000) 接下来m行形 ...