Vue（十）生命周期
<script>
window.onload=function(){
let vm = new Vue({
el:'#app',
data:{
msg:'Hello World ! '
},
methods:{
update(){
this.msg='Hello Kitty！';
},
destroy(){
// this.$destroy();
vm.$destroy();
}
},
beforeCreate(){
alert('组件实例刚刚创建，还未进行数据观测和事件配置');
},
created(){ //常用！！！
alert('实例已经创建完成，并且已经进行数据观测和事件配置');
},
beforeMount(){
alert('模板编译之前，还没挂载');
},
mounted(){ //常用！！！
alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
},
beforeUpdate(){
alert('组件更新之前');
},
updated(){
alert('组件更新之后');
},
beforeDestroy(){
alert('组件销毁之前');
},
destroyed(){
alert('组件销毁之后');
}
})
}
</script>
<body>
<div id="app">
{{msg}}
<br>
<button @click="update">更新数据</button>
<button @click="destroy">销毁组件</button>
</div>
</body>
Vue（十）生命周期的更多相关文章
- 8.vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- 如何解释vue的生命周期才能令面试官满意？
当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...
- vue之生命周期
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...
- vue的生命周期的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue笔记-生命周期
生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue 关于生命周期
序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也 ...
- Vue：生命周期
一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- 深入理解Vue的生命周期
谈到Vue的生命周期,相信许多人并不陌生.但大部分人和我一样,只是听过而已,具体用在哪,怎么用,却不知道.我在学习vue一个多礼拜后,感觉现在还停留在初级阶段,对于mounted这个挂载还不是很清楚. ...
- vue笔记 - 生命周期第二次学习与理解
对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...
随机推荐
- ANGULAR6.x - 错误随笔 - Can't bind to 'formGroup'
formGroup:错误 Can't bind to 'formGroup' since it isn't a known property of 'form'. (" 原因: 在使用for ...
- 1900型USB接口扫描枪设置虚拟串口模式提升扫描速度
在使用扫描枪的过程中,发现扫描二维码速度比较慢,不到100个字符,花了大概2-3秒的时间才完成显示,这个速度不能忍受啊.通过度娘,说是可以将USB键盘模式接收字符转换成虚拟串口接收,这样可以大大提高速 ...
- 51Nod1309 Value of all Permutations 期望
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1309.html 题目传送门 - 51Nod1309 题意 长度为N的整数数组A,有Q个查询,每个查询 ...
- HDU2853 Assignment KM
原文链接http://www.cnblogs.com/zhouzhendong/p/8284105.html 题目传送门 - HDU2853 题意概括 (来自谷歌翻译) 题解 这是一道好题. 我们首先 ...
- 068 mapWithState函数的讲解
1.问题 主要是updateStateByKey的问题 有的值不需要变化的时候,还会再打印出来. 每个批次的数据都会出现,如果向redis保存更新的时候,会把不需要变化的值也更新,这个不是我们需要的, ...
- Machine Learning 算法可视化实现1 - 线性回归
一.原理和概念 1.回归 回归最简单的定义是,给出一个点集D,用一个函数去拟合这个点集.而且使得点集与拟合函数间的误差最小,假设这个函数曲线是一条直线,那就被称为线性回归:假设曲线是一条二次曲线,就被 ...
- js面向对象实例
JSON方式来编写对象简单 不适合多个对象 var json={a:12, show:function (){ alert(this); }};json.show(); //理所当然弹出的是objec ...
- 2601 电路维修 （双端队列bfs\优先队列bfs（最短路））
描述 Ha'nyu是来自异世界的魔女,她在漫无目的地四处漂流的时候,遇到了善良的少女Rika,从而被收留在地球上.Rika的家里有一辆飞行车.有一天飞行车的电路板突然出现了故障,导致无法启动. 电路板 ...
- hdu 3499 flight 【分层图】+【Dijkstra】
<题目链接> 题目大意: 现在给你一些点,这些点之间存在一些有向边,每条边都有对应的边权,有一次机会能够使某条边的边权变为原来的1/2,求从起点到终点的最短距离. 解题分析: 分层图最短路 ...
- CodeForces 371C Hamburgers（经典）【二分答案】
<题目链接> 题目大意: 给以一段字符串,其中只包含"BSC"这三个字符,现在有一定量免费的'B','S','C‘,然后如果想再买这三个字符,就要付出相应的价格.现在总 ...