02Vue2.0+生命周期
Vue生命周期是Vue对象从无到有再到无的一个过程，我们又是不仅要明白一个对象的使用，
同时也要知道一个对象怎么创建了，就比如Spring的生命周期，往往不只是面试官的考点，
同时在项目中也也可能常常用到。
一共有：
- beforeCreate:此时只是创建了Vue对象，但是并没有对数据进行检测
- created：开始监控Data对象变化，并初始化事件
- beforeMount：编译模板，把data里面的数据和模板生成html
- mounted：替代掉el表达中的内容，选择加载相应dom
- beforeUpdate：监视数据发生变化，注意第一次加载dom并不会发生
- updated：实时更新数据，此发生发生在更新el之前
- beforeDestroy：子组件发生变化或者调用了$destroy()方法，
比如路由发生变化，重新加载了组件，这时组件也就注销了
- destroyed:实例销毁了，在新组件加载之前
下面是一个测试程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue2.0生命周期</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> </head>
<body>
<div id="box">
<input type="text" v-model="msg"><br>
<input type="button" value="销毁" @click="destroy">
我是输入信息==>{{msg}}
<ul >测试销毁
<li>1点击销毁程序</li>
<li>2.再去输入框输入，会发现输入并没有发生改变</li>
</ul> </body>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
msg:"hello"
},
methods:{
destroy:function(){
console.log(this);
this.$destroy();
}
},
beforeCreate:function(){
alert("创建之前");
},
created:function(){
alert("创建之后");
},
beforeMount:function(){
alert("挂载之前");
},
mounted:function(){
alert("挂载之后");
},
beforeUpdate:function(){
alert("更新之前");
},
updated:function(){
alert("更新之后");
},
beforeDestroy:function(){
alert("销毁之前");
},
destroyed:function(){
alert("销毁了");
} })
</script>
</html>
02Vue2.0+生命周期的更多相关文章
- vue2.0 生命周期 简析
Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- thinkphp5.0生命周期
本篇内容我们对ThinkPHP5.0的应用请求的生命周期做大致的介绍,以便于开发者了解整个执行流程. 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件. ...
- Vue2.0生命周期和钩子函数的一些理解
转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...
- Vue2.0 —生命周期和钩子函数
vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...
- thinkphp5.0 生命周期
1.入口文件 // 应用入口文件 index.php // 定义项目路径 define('APP_PATH', __DIR__ . '/../application/'); // 加载框架引导文件 r ...
- 详解Vue2.0生命周期
网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...
- vue1.0生命周期
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ng4.0 生命周期
名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前. OnChanges 指令和组件 ngOnInit 在第一轮 ngOn ...
随机推荐
- java的分数类
概述 分数类在算法中非常重要, 而在java中不那么重要,java基础类库提供 了biginteger了,提供类似方式, package 组合数学; public class Fraction { p ...
- Python之IO模型
IO模型介绍 为了更好地了解IO模型,我们需要事先回顾下:同步.异步.阻塞.非阻塞 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞 ...
- Python将excel文件从xls转换为xlsx
本文使用场景:将一个xls格式Excel文件转换为xlsx文件格式.接下来将一步一步演示该操作.你也可以对代码进行修改使其适用于你所需的场景. 安装Python3 首先需要安装Python,我这里安装 ...
- [LeetCode] Smallest Good Base 最小的好基数
For an integer n, we call k>=2 a good base of n, if all digits of n base k are 1. Now given a str ...
- jdk 动态代理源码分析
闲来无事,撸撸源码 使用方法 直接看代码吧.. package com.test.demo.proxy; import java.lang.reflect.InvocationHandler; imp ...
- Mysql之触发器的操作:
触发器的操作: 1.触发器的创建: (1).创建包含一条语句的触发器 create trigger trigger_name before|after trigger_event on table_n ...
- preg_replace引发的phpmyadmin(4.3.0-4.6.2)命令执行漏洞
编辑器坏了 (: 今天看到这个phpmyadmin的代码执行,https://www.waitalone.cn/phpmyadmin-preg_replace-rce.html 记录一下:preg_ ...
- [HNOI 2001]产品加工
Description 某加工厂有A.B两台机器,来加工的产品可以由其中任何一台机器完成,或者两台机器共同完成.由于受到机器性能和产品特性的限制,不同的机器加工同一产品所需的时间会不同,若同时由两台机 ...
- bzoj1272 Gate Of Babylon
[问题描述] [输入格式] [输出格式] [样例输入] 2 1 10 13 3 [样例输出] 12 [样例说明] [数据范围] 先容斥,考虑枚举哪些条件强制不满足,即直接选出b[i]+1件宝具 假设强 ...
- 李耀于NOIP2010集训出的题 Dvalue
此题模型比较明显,求无向图的一棵生成树,使得最大边减去最小边的值最小,这是最小生成树的一个变式 设计出此题的算法需要利用Kruskal贪心的性质,首先枚举一条最小边,接着求原图的一棵最小生成树,根据k ...