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 ...
随机推荐
- Tomcat NIO
说起Tomcat的NIO,不得不提的就是Connector这个Tomcat组件.Connector是Tomcat的连接器,其主要任务是负责处理收到的请求,并创建一个Request和Response的对 ...
- WPF项目学习.四
信息收录项目 版权声明:本文为博主初学经验,未经博主允许不得转载. 一.前言 记录在学习与制作WPF过程中遇到的解决方案. 需求文案.设计思路.简要数据库结构.简要流程图和明细代码,动图细化每步操作 ...
- React-Native（一）：React Native环境搭建
第一步:安装jdk 从java官网下载jdk8 配置环境变量: JAVA_HOME:D:\Program Files\Java\jdk1.8.0_111 Path中追加:%JAVA_HOME%\bin ...
- docker 安装与学习
本文在CentsOS下安装Docker 1.安装前准备工作 系统要求: 在CentOS下需要64位的CentsOS 7 OS requirements To install Docker, you ...
- 搭建 springboot 2.0 mybatis 读写分离 配置区分不同环境
最近公司打算使用springboot2.0, springboot支持HTTP/2,所以提前先搭建一下环境.网上很多都在springboot1.5实现的,所以还是有些差异的.接下来咱们一块看一下. 文 ...
- .Net中集合排序还可以这么玩
背景: public class StockQuantity { public StockQuantity(string status, DateTime dateTime, int quantity ...
- 关于ES6 的对象解构赋值
之 前写了关于ES6数组的解构 现在 go on ; 解构不仅可以用于数组,还可以用于对象: 对象的解构和数组有一个重要的不同.数组的元素是按次序排列的,变量的取值是由他的位置决定的:而对象的属性没有 ...
- ES6(正则扩展）
ES6中正则的扩展 正则新增特性 一.构造函数的变化 1.ES5中new一个正则对象方法 (一行中2个参数,二行中1个参数) (第一行中的第一个参数必须是字符串) 2.ES6中新增一种方法(构造函数) ...
- 浅谈CSRF漏洞
前言: 看完小迪老师的CSRF漏洞讲解.感觉不行 就自己百度学习.这是总结出来的. 歌曲: 正文: CSRF与xss和像,但是两个是完全不一样的东西. xss攻击(跨站脚本攻击)储存型的XSS ...
- bzoj1853[Scoi2010]幸运数字 容斥
1853: [Scoi2010]幸运数字 Time Limit: 2 Sec Memory Limit: 64 MBSubmit: 3027 Solved: 1128[Submit][Status ...