vue生命周期
1.Vue1.0生命周期
1.1钩子函数:
1.2生命周期图示
1.3代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-resource.js"></script>
</head>
<body>
<div id="box">
{{message}}
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
message:"张三"
},
/**
* 修改默认初始化的数据
*/
created:function(){
this.message = "created";
},
/**
* 编译模板
*/
beforeCompile:function () {
this.message = "beforeCompile";
},
compiled:function () {
this.message = "compiled";
},
/**
* 将编译好的模板通过ready渲染到DOM，在渲染到DOM之前我们可以在ready函数中增加一些自己的业务逻辑
*/
ready:function(){
this.message = "ready"
},
/**
* 将内存中的数据销毁
*/
beforeDestroy:function () {
//销毁的目的是干掉内存中数据，并不是修改内存中数据所以这里没有用this.message=""这样做是有问题不合理的
alert('beforeDestroy');
},
destroyed:function () {
//销毁的目的是干掉内存中数据，并不是修改内存中数据所以这里没有用this.message=""这样做是有问题不合理的
alert('destroyed');
}
});
document.onclick = function () {
vm.$destroy();
}
</script>
</body>
</html>
2.Vue2.0生命周期
2.1钩子函数
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后
2.2示例图
总体分为4步骤：实例创建前后，模板编译前后，组件更新前后，组件销毁前后
2.3代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue2.0声明周期</title>
<script src="./../bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<strong v-text="message"></strong>
<button type="button" @click="update">更新</button>
<button type="button" @click="destroy">卸载</button>
</div>
<script>
new Vue({
data(){
return {
message:"更新前"
}
},
methods:{
update(){
this.message = "我被更新了"
},
destroy(){
this.$destroy();
}
},
//data数据初始化前,组件实例刚刚被创建,属性都没有
beforeCreate(){
alert('数据初始化中...,当前message='+this.message);
},
//实例已经创建完成，属性已经绑定
created(){
alert("实例创建完毕，当前message="+this.message);
},
//实例挂在到DOM前
beforeMount(){
alert("实例数据将要挂在到DOM上");
},
//实例数据已经挂在到DOM上
mounted(){
alert("实例数据已经挂在到DOM上");
},
//更新组件前
beforeUpdate(){
alert("更新组件前message="+this.message);
},
//更新组件后
updated(){
alert("组件更新完毕message="+this.message);
},
beforeDestroy(){
alert("组件销毁前");
},
destroyed(){
alert("组件销毁后");
}
}).$mount("#app")
</script>
</body>
</html>
2.3代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue2.0声明周期</title>
<script src="./../bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<strong v-text="message"></strong>
<button type="button" @click="update">更新</button>
<button type="button" @click="destroy">卸载</button>
</div>
<script>
new Vue({
data(){
return {
message:"更新前"
}
},
methods:{
update(){
this.message = "我被更新了"
},
destroy(){
this.$destroy();
}
},
//data数据初始化前,组件实例刚刚被创建,属性都没有
beforeCreate(){
alert('数据初始化中...,当前message='+this.message);
},
//实例已经创建完成，属性已经绑定
created(){
alert("实例创建完毕，当前message="+this.message);
},
//实例挂在到DOM前
beforeMount(){
alert("实例数据将要挂在到DOM上");
},
//实例数据已经挂在到DOM上
mounted(){
alert("实例数据已经挂在到DOM上");
},
//更新组件前
beforeUpdate(){
alert("更新组件前message="+this.message);
},
//更新组件后
updated(){
alert("组件更新完毕message="+this.message);
},
beforeDestroy(){
alert("组件销毁前");
},
destroyed(){
alert("组件销毁后");
}
}).$mount("#app")
</script>
</body>
</html>
vue生命周期的更多相关文章
- vue生命周期的介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 生命周期
一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...
- 详解vue生命周期
vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...
- 关于vue生命周期
官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...
- vue生命周期的理解
我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...
- Vue生命周期，面试常见问题
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
- 面试题之（vue生命周期）
在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...
- [转] Vue生命周期
Vue生命周期 这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </sectio ...
- vue生命周期、钩子函数
https://segmentfault.com/a/1190000011381906 详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...
随机推荐
- Delphi 中同类型方法的说明
对象的方法能定义成静态(static).虚拟(virtual).动态(dynamic)或消息处理(message).请看下面 的例子: TFoo = class procedure IAmAStati ...
- 修改Linux默认启动级别或模式的方法
冲动的惩罚: 海阔天空: 在linux系统的7种启动级别,默认为X-Window,类似于Windows的窗口模式. 如何修改或变更linux的默认启动级别或模式呢? 以root身份进入Linux,修改 ...
- 【Python扩展阅读【转】】字符串的方法及注释
capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 center(width) 将字符串居中,并使用空格填充至长度wi ...
- session的工作原理
asp中Session的工作原理:asp的Session是具有进程依赖性的.ASP Session状态存于IIS的进程中,也就是inetinfo.exe这个程序.所以当inetinfo.exe进程崩溃 ...
- onscroll
var COUNT = 0, demo = document.getElementById('demo'); function testFn() {demo.innerHTML += 'testFN ...
- 关于WPF程序启动性能
项目里WPF的启动时间太久(>1分钟),显然是不能接受的.超过10秒,连Loading的等待框都会让用户感到厌烦. 1. 症状 项目的结构是1个WPF主进程,启动3个WPF子进程.子进程在启动时 ...
- Eclipse中怎么安装TestNG单元测试框架
在进行使用的eclipse的进行开发的代码中,必然就会需要进行单元测试,在单元测试的情况提供较多的框架单元测试,例如使用junit单元测试,而在国外进行开发较好的单元测试,提供了较好的测试的报告,ju ...
- ldap日志
要开启openldap的日志功能是非常简单的:1.在slapd.conf中加一行:loglevel 4095 2.在/etc/rsyslog.conf 中加入ldap日志文档: ...
- 2014年6月份第1周51Aspx源码发布详情
企业汽车服务终端管理系统源码 2014-6-3 [VS2010]源码描述:本系统专门服务于(汽车美容4s店) 完整的一套汽车美容管理服务系统. 功能介绍:汽车美容服务终端功能强大而又简便实用,界面友 ...
- box-shadow
box-shadow:a b c d e; a-水平位置,相对于盒子本身在水平方向的正偏移距离: b-垂直位置: c-模糊距离: d-阴影尺寸,从盒子的边框开始算起的阴影的宽度: e-阴影颜色: f- ...