vue2.0生命周期函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="vue2.2.js"></script>
<title>构造器的声明周期</title>
</head>
<body>
<h1>构造器的声明周期</h1>
<hr>
<div id="app">
{{count}}
<p><button @click="add">加分</button></p>
</div>
<button onclick="vm.$destroy()">销毁</button>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
count: 1
},
methods: {
add: function() {
this.count++;
}
},
beforeCreate: function() {
console.log('1-beforeCreate 初始化之后');
},
created: function() {
console.log('2-created 创建完成');
},
beforeMount: function() {
console.log('3-beforeMount 挂载之前');
},
mounted: function() {
console.log('4-mounted 被创建');
},
beforeUpdate: function() {
console.log('5-beforeUpdate 数据更新前');
},
updated: function() {
console.log('6-updated 被更新后');
},
activated: function() {
console.log('7-activated');
},
deactivated: function() {
console.log('8-deactivated');
},
beforeDestroy: function() {
console.log('9-beforeDestroy 销毁之前');
},
destroyed: function() {
console.log('10-destroyed 销毁之后')
} })
</script>
</body>
</html>
create 和 mounted 相关:
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载 dom元素已经加载到HTML中
destroy 相关: 执行:vm.$destroy()
销毁完成后，我们再重新改变count的值，vue不再对此动作进行响应了。
但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。
生命周期总结:
beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容-
vue2.0生命周期函数的更多相关文章
- vue2.0 生命周期 简析
Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...
- Vue2.0生命周期和钩子函数的一些理解
转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...
- Vue2.0 —生命周期和钩子函数
vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...
- 详解Vue2.0生命周期
网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...
- vue2.0生命周期
https://www.cnblogs.com/goloving/p/8616989.html(copy )
- vue2.0生命周期详解
首先上图展 <template> <div id="home"> <p>{{ message }}</p> </div> ...
- Vue2.0 - 生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同
vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1 vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...
- 02Vue2.0+生命周期
Vue生命周期是Vue对象从无到有再到无的一个过程,我们又是不仅要明白一个对象的使用, 同时也要知道一个对象怎么创建了,就比如Spring的生命周期,往往不只是面试官的考点, 同时在项目中也也可能常常 ...
随机推荐
- eclipse 重启/打开内置浏览器
重启 Eclipse 重启选项允许用户重启 Eclipse. 我们可以通过点击 File 菜单选择 Restart 菜单项来重启 Eclipse. Eclipse 内置浏览器 Web 浏览器 Ecli ...
- java集合的关系
在 Java2中,有一套设计优良的接口和类组成了Java集合框架Collection,使程序员操作成批的数据或对象元素极为方便.这些接口和类有很多对抽象数据类型操作的API,而这是我们常用的且在数据结 ...
- vim插件：显示树形目录插件NERDTree安装 和 使用【转】
本文转载自:https://my.oschina.net/VASKS/blog/388907 下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.c ...
- YTU 2579: 填空题----删除指定字符
2579: 填空题----删除指定字符 时间限制: 1 Sec 内存限制: 128 MB 提交: 164 解决: 61 题目描述 小明想要做个小程序,能够删除字符串中特定的字符. 例如:想要在下面 ...
- 7-39 Math对象
7-39 Math对象 学习要点 掌握常用的数学计算方法 温馨提示:关于学习方法的建议 不要强求自己讲参考手册上所以的属性和方法都搞清楚,原因如下: 有些属性和方法非常生僻,很少用,甚至经过一段时间后 ...
- html5--switch选择结构的优化
html5--switch选择结构的优化 问题: 使用循环语句判断月份是31天还是30天 两点提示: 使用switch多条件判断语句 合理的省略break优化代码 <!DOCTYPE html& ...
- hash与map的区别联系应用
一,hashtable原理: 哈希表又名散列表,其主要目的是用于解决数据的快速定位问题.考虑如下一个场景. 一列键值对数据,存储在一个table中,如何通过数据的关键字快速查找相应值呢?不要告诉我一个 ...
- Lucene 4.X 倒排索引原理与实现: (3) Term Dictionary和Index文件 (FST详细解析)——直接看例子就明白了！！！
转自: http://www.cnblogs.com/forfuture1978/p/3945755.html 好好看看吧 倒排列表信息中词典相关存储的最关键格式 占倒排列表中文件大小的多数 我们来看 ...
- Ubuntu Nginx uwsgi django 初试
/************************************************************************************** * Ubuntu Ngi ...
- JavaScript Array 的学习
首先创建数组 var empty = [];//创建一个空的数组: var diffType = [1,'a',2.3,{},[4,5],,];//创建一个包含不同类型的数组 var undef = ...