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 ...
随机推荐
- RxJava系列番外篇：一个RxJava解决复杂业务逻辑的案例
之前写过一系列RxJava的文章,也承诺过会尽快有RxJava2的介绍.无奈实际项目中还未真正的使用RxJava2,不敢妄动笔墨.所以这次还是给大家分享一个使用RxJava1解决问题的案例,希望对大家 ...
- uva 1411 Ants
题意: 一个平面上有n个黑色的点,n个白色的点,要求黑色的点与白色点之间一一配对,且线段之间不相交. 思路: 线段不相交并不好处理,想了很久想不出,所以看了蓝书的讲解. 一个很明显的结论是,不相交的线 ...
- Hive:添加、删除分区
添加分区: ', p_loctype='MHA'); 已经创建好的分区表: INFO : Loading partition {p_hour, p_city, p_loctype=MHA} INFO ...
- Hibernate（十三）：HQL查询（二）
背景 基于上一章节<Hibernate(十二):HQL查询(一)>,已经学习了一部分关于HQL的用法: HQL带参数查询 HQL Order By排序查询 HQL 设置实体参数查询 本章节 ...
- PHP面向对象-看父类调用子类方法
大部分面向对象编程语言中,父类是不允许调用子类的方法的,但是PHP中可以 1.父类调用子类方法示例 class A { public function testa() { $this->test ...
- 【django之modelform】
一.什么是modelform ModelForm顾名思义就Form和Django的Model数据库模型结合体,可以简单.方便得对数据库进行增加.编辑操作和验证标签的生成: 举例说明: 比如我们的数据库 ...
- css中单位px,em，rem和vh/vw的理解
>px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...
- SpringMVC 教程 - Controller
原文地址:https://www.codemore.top/cates/Backend/post/2018-04-10/spring-mvc-controller 声明Controller Contr ...
- [BZOJ 3456]城市规划
Description 题库链接( bzoj 权限题,可以去 cogs 交♂ 题库链接2 求含有 \(n\) 个点有标号的简单无向联通图的个数.方案数对 \(1004535809(479\times ...
- [USACO 03FEB]Farm Tour
Description When FJ's friends visit him on the farm, he likes to show them around. His farm comprise ...