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 ...
随机推荐
- ActiveMQ学习系列（一）
一.JMS规范 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消 ...
- 如何使用Visual Studio 2017自带的源代码反编译功能
反编译C#源代码,大家可能第一时间想到 .NET Reflector 这个工具.但是这个工具反编译出来的代码跟实际源码还是有一定差距的,阅读起来不是很便利. 本人在查看Visual Studio 20 ...
- tornado框架源码分析---Application类之debug参数
先贴上Application这个类的源码. class Application(httputil.HTTPServerConnectionDelegate): """A ...
- H5 input输入限制最大位数，和调用小键盘需求发生冲突的解决办法
首先,限制输入最大位数时,input有自带的属性maxlength. <input type="text" name="email" maxlength= ...
- html标记语言 --框架
html标记语言 --框架 六.框架 1.什么是框架 框架将浏览器划分成不同的部分,每一部分加载不同的网页 实现同一浏览器窗口中加载多个页面的效果. 语法格式<frameset>..... ...
- with工作原理
进入时,调用对象的__enter__ 退出时,调用对象的__exit__
- 一 Unicode和UTF-8的异同
下面就是我的笔记,主要用来整理自己的思路.但是,我尽量试图写得通俗易懂,希望能对其他朋友有用.毕竟,字符编码是计算机技术的基石,想要熟练使用计算机,就必须懂得一点字符编码的知识.1. ASCII码我们 ...
- 深入解析浏览器的幕后工作原理(三) 呈现树和 DOM 树的关系
呈现树和 DOM 树的关系 呈现器是和 DOM 元素相对应的,但并非一一对应.非可视化的 DOM 元素不会插入呈现树中,例如"head"元素.如果元素的 display 属性值为& ...
- 【NOIP2016】【LCA】【树上差分】【史诗级难度】天天爱跑步
学弟不是说要出丧题吗>>所以我就研究了1天lca又研究了1天tj然后研究了一天天天爱跑步,终于写了出来.(最后的平均用时为240ms...比学弟快了1倍...) 题意:给你颗树,然后有m个 ...
- hdu 5398 动态树LCT
GCD Tree Time Limit: 5000/2500 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Su ...