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).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
随机推荐
- Vue Router的配置
1.beforeEnter function requireAuth (route, redirect, next) { if (!auth.loggedIn()) { redirect({ path ...
- View Controller Programming Guide for iOS---(二)---View Controller Basics
View Controller Basics Apps running on iOS–based devices have a limited amount of screen space for d ...
- Table View Programming Guide for iOS---(三)----Overview of the Table View API
Overview of the Table View API 表格视图API概述 The table view programming interface includes several UIKit ...
- Ubuntu16.04 开机显示The system is running in low-graphics mode
1. 在"The system is running in low-graphics mode"界面,直接按 ctrl+alt+F1,会进入一个命令输入的模式 2. 输入用户名密码 ...
- E20180406-hm
dressing n. 穿衣; 调味品; 肥料 dress n. 衣服; 礼服; 连衣裙; 装饰; vt. 打扮; 穿着; 给…穿衣; monde n. 时髦社交界,上流社会; ingredient ...
- bzoj 4403: 序列统计【lucas+组合数学】
首先,给一个单调不降序列的第i位+i,这样就变成了单调上升序列,设原来数据范围是(l,r),改过之后变成了(l+1,r+n) 在m个数里选长为n的一个单调上升序列的方案数为\( C_m^n \),也就 ...
- IT兄弟连 JavaWeb教程 Servlet
Servlet的定义 Java Servlet是运行在Web服务器或应用服务器上的程序,它是作为来自Web浏览器或其他HTTP客户端的请求和HTTP服务器上的数据库或应用程序之间的中间层. 使用Ser ...
- pycharm 添加个人信息
2. 可以使用搜索快速找到"File and Code Templates", 右侧菜单选择"Python Script",对模板进行编辑 格式为: ${< ...
- jQuery笔记之工具方法—Ajax 优化回调地狱
在上一篇文我们说到了回调地狱不好的地方,今天我们看看怎么来优化它,让它可以运用到实际开发中. 什么是回调地狱?回调地狱就是一个函数里面嵌套了所有功能函数,然后缩略图形成一个三角形. 这样的代码可复用性 ...
- Educational Codeforces Round 18 D
Description T is a complete binary tree consisting of n vertices. It means that exactly one vertex i ...