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# 利用占位符替换word中的字符串和添加图片
利用占位符替换word中的字符串和添加图片 ///<summary> /// 替换word模板文件内容,包括表格中内容 /// 调用如下:WordStr ...
- String字符串类课后作业
String动手动脑和课后作业 请运行以下示例代码StringPool.java,查看其输出结果.如何解释这样的输出结果?从中你能总结出什么? 结果: 总结:在Java中,内容相同的字串常量(&quo ...
- 如何在CentOS 7中禁止IPv6
最近,我的一位朋友问我该如何禁止IPv6.在搜索了一番之后,我找到了下面的方案.下面就是在我的CentOS 7 迷你服务器禁止IPv6的方法. 你可以用两个方法做到这个. 方法 1 编辑文件/etc/ ...
- [WebServer] Windows操作系统下 Tomcat 服务器运行 PHP 的环境配置
前言: 由于本人在开发和学习过程中需要同时部署 JavaWeb 和 PHP 项目,于是整理了网上的一些相关资料,并结合自己的实际操作,记录于此,以供参考. 一.环境(64bit): 1.操作系统.To ...
- 【图像处理】【SEED-VPM】3.外设信息
———————————————————————————————————————————————————————————————————————— 摄像头接口 具有AV端子输出的彩色摄像头,摄像头广角8 ...
- https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
- struts入门实例
入门实例 1 .下载struts-2.3.16.3-all .不摆了.看哈就会下载了. 2 . 解压 后 找到 apps 文件夹. 3. 打开后将 struts2-blank.war ...
- 两台装有Ubuntu系统的服务器搭建VPN（一台为本地服务器，另一台为云服务器）
我们搭建VPN采用的是openvpn,搭建过程总体需要经过三大步骤: 1.openvpn的安装与配置 2.端口转发 3.系统重启iptables规则自动生效 注意:以下所有名令在ro ...
- selenium+python环境搭建
1.安装python-2.7.3.msi 2.安装pywin32-216.win32-py2.7.exe 3.下selenium包,selenium-2.35.0.tar.gz,放到D:\autote ...
- C++与Java的语法区别
C++与Java的语法区别 首先,两个大的不同是主函数和怎样编译的不同,接下来是许多小的区别. main 函数C++//自由浮动的函数int main( int argc, char* argv[]) ...