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的生命周期 ...
随机推荐
- C#关于winforms窗体大小、边框、移动、动画等属性
1.窗体的边框设置为无: 2.把窗体高度调整为25,发现跑的时候总在40左右,这时需要改改属性, 把MinimumSize(0, 0)改成不为0的,最好改成和自己想要一样的大小, 最大高宽也应该这么调 ...
- 项目导入myeclipse10后jsp报错问题
电脑重装系统装了个myeclipse10,当项目导入时发现jsp报错,原本以为是jdk版本问题,在网上找了资料才知道原来是myeclipse10相对之前版本对js的检查更加严格了.可以用以下方法解决: ...
- String Mybatis 多数据源配置
做项目用到了多数据源的配置,有时候不用就忘记了,自己做下备份以防止忘记. 在配置文件中: <bean id="ds1" class="org.apache.comm ...
- python常用的内置库
标准库: import os os.getcwd() //返回当前工作路径 os.chdir('/server/accesslogs') # Change current working dir ...
- scanf_s 可能会出现的死循环
VS2015中提供了scanf_s().在调用时,必须提供一个数字以表明最多读取多少位字符. scanf_s("%s& ...
- MATLAB中FFT的使用方法
MATLAB中FFT的使用方法 说明:以下资源来源于<数字信号处理的MATLAB实现>万永革主编 一.调用方法X=FFT(x):X=FFT(x,N):x=IFFT(X);x=IFFT(X, ...
- spring知识
Spring以IoC.AOP问主要思想,鞥协同struts,hibernate,webwork,jsf,iBatis等框架. Spring最主要的思想史IoC(Inversion of Control ...
- 配置指定使用tcc编译器编译nim程序
1.前言 nim是什么? nim是一门静态编译型语言,语法类似python,nim的代码被翻译成C代码再被C编译器编译成可执行文件.因此nim的可执行文件比较小,性能应该也不错. 最简单的nim程序就 ...
- mysql 同一IP 产生太多终端的数据库连接导致阻塞
问题:null, message from server: "Host 'ip' is blocked because of many connection errors; unblock ...
- java 终端练习
Java第一天笔记 一．Window中常见的dos命令 在哪里操作dos命令: Win7 ---> 开始 ---->所有程序--->附件---->命令提示符 Win7--&g ...