Vue之组件的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click='isShow=!isShow'>改变组件的生死</button>
<keep-alive> <!--此标签用于使里面的组件缓存起，因此避免销毁，创建的过程，若想看见创建和销毁的过程，去掉该标签即可-->
<App v-if='isShow'/>
</keep-alive>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
/* 组件的生命周期的图示链接：https://cn.vuejs.org/images/lifecycle.png
以下是与组件生命周期相关的钩子函数
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestory
- destoryed
*/
var App = {
template: `<div>我是局部组件App
<button @click='isShow=!isShow'>更新DOM</button>
<p v-if='isShow'>我被改变了～</p>
</div>`,
data() {
return {
msg:'hi',
isShow: false
}
},
beforeCreate() {
// 在组件创建前调用
console.log('Before create, you can not get msg, msg is:', this.msg);
},
created() {
// 在组件创建后调用
console.log('After created, you can get msg, msg is:', this.msg)
},
beforeMount() {
// 挂载数据到DOM前调用,此时还没有渲染局部组件里面的数据
console.log(document.getElementById('app'));
},
mounted() {
// 挂载数据到DOM后调用，此时已经正常地渲染了局部组件
console.log(document.getElementById('app'));
},
beforeUpdate() {
// 在更新DOM之前，调用此钩子函数，可以获取原始的DOM
console.log('I am original DOM:',document.getElementById('app').innerHTML);
},
updated() {
// 在更新DOM后调用此钩子函数，可以获取最新的DOM
console.log('I am new DOM:',document.getElementById('app').innerHTML)
},
beforeDestroy(){
console.log('beforeDestroy');
},
destroyed(){
console.log('destroyed');
},
activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件被停用了');
}
};
new Vue({
el: '#app',
template: ``,
data() {
return {
isShow: false
}
},
components: {
App
}
});
</script>
</body>
</html>
Vue之组件的生命周期的更多相关文章
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- vue 父子组件的生命周期顺序
一.加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount ...
- 通俗易懂了解Vue组件的生命周期
1.前言 在使用vue2.0进行日常开发中,我们总有这样的需求,我就想在页面刚一加载出这个表格组件时就发送请求去后台拉取数据,亦或者我想在组件加载前显示个loading图,当组件加载出来就让这个loa ...
- vue组件的生命周期详解
1.生命周期&生命周期函数 生命周期:指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 生命周期函数:由vue框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...
- 《微信小程序七日谈》- 第三天：玩转Page组件的生命周期
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 前两篇 ...
- Vue2.5笔记：Vue的实例与生命周期
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...
- vue基本配置和生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- ReactJS入门（二）—— 组件的生命周期
如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...
- React Native 中组件的生命周期
概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
随机推荐
- Streamline Your App with Design Patterns 用设计模式精简你的应用程序
Back to Design Patterns Streamline Your App with Design Patterns 用设计模式精简你的应用程序 In Objective-C progra ...
- CodeForces 718A Efim and Strange Grade (贪心)
题意:给定一个浮点数,让你在时间 t 内,变成一个最大的数,操作只有把某个小数位进行四舍五入,每秒可进行一次. 析:贪心策略就是从小数点开始找第一个大于等于5的,然后进行四舍五入,完成后再看看是不是还 ...
- （水题）洛谷 - P1149 - 火柴棒等式
https://www.luogu.org/problemnew/show/P1149 一开始还分类重复了.在非0的dfs中居然赋值了0,脑残得一笔. 其实就按 $lead0$ 分类就好了, $lea ...
- IT兄弟连 JavaWeb教程 Servlet表单数据
很多情况下,需要传递一些信息,从浏览器到Web服务器,最终到后台程序.浏览器使用两种方法可将这些信息传递到Web服务器,分别为GET方法和POST方法. 1．GET方法 GET 方法向页面请求发送已编 ...
- poj 2412 The Balance 【exgcd】By cellur925
题目传送门 一遇到数学就卡住,我这是怎么肥4...(或许到图论会愉悦吧,逃) Description * 给出两种重量为的 A, B 的砝码,给出一种使用最少的砝码的方式,称出重量 C. 我们可以比较 ...
- 最短路之Dijkstra(迪杰斯特拉)
一般用法: Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Dijkstra算法是很有代 ...
- android 启动报错
报错如下: AAPT err(Facade for 1532009679): libpng error: Read Error Error:Execution failed for task ':ap ...
- Lightoj 1231 - Coin Change (I) (裸裸的多重背包)
题目链接: Lightoj 1231 - Coin Change (I) 题目描述: 就是有n种硬币,每种硬币有两个属性(价值,数目).问用给定的硬币组成K面值,有多少种方案? 解题思路: 赤果果的 ...
- Codeforces 1144F（二分染色）
发现奇环不可行,偶环可行,考虑二分图.然后染色,方向全都从一种指向另一种就可以了,随意. ; int n, m, color[maxn]; vector<int> vc[maxn]; ve ...
- Mirror Number SPOJ - MYQ10
Mirror Number SPOJ - MYQ10 题意:http://blog.csdn.net/hcbbt/article/details/38349367 稍微改一下http://www.cn ...