Vue基础之生命周期函数[残缺版]！
Vue基础之生命周期函数[残缺版]！
为什么说是残缺版呢？! 因为有一些周期函数我并没有学到！所以是残缺版！
01 beforeCreate
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。// 简单理解就是整个页面创建之前调用的生命周期!
02 created
/* 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，
属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 */
03 beforeMount
//在挂载开始之前被调用：相关的渲染函数首次被调用
04 mounted
//el 被新创建的 vm.$el 替换, 挂载成功
05 beforeUpdate
//数据更新时调用
// 数据变化之前调用的一个函数!
06 updated
//组件 DOM 已经更新, 组件更新完毕
温馨提醒
// 生命周期需要写在new Vue 传递的这个对象内!以属性的方式进行声明!这个属性他是一个函数!在 Vue运行的每个阶段, 会调用以生命的周期函数!!
// 有一点需要注意, 就是生命周期函数是不能使用箭头函的!因为箭头函数没有this!
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
// 生命周期需要写在new Vue 传递的这个对象内!以属性的方式进行声明!这个属性他是一个函数!在 Vue运行的每个阶段, 会调用以生命的周期函数!!
// 有一点需要注意, 就是生命周期函数是不能使用箭头函的!因为箭头函数没有this!
var vm = new Vue({
el: "#app",
data: {
msg: "hi vue",
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
// 简单理解就是整个页面创建之前调用的生命周期!
beforeCreate: function() {
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。 */
created: function() {
console.log('created');
},
//在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount: function() {
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂载成功
mounted: function() {
console.log('mounted');
},
//数据更新时调用
// 数据变化之前调用的一个函数!
beforeUpdate: function() {
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated: function() {
console.log('updated');
}
});
setTimeout(function() {
vm.msg = "change ......";
}, 3000);
</script>
</body>
Vue基础之生命周期函数[残缺版]！的更多相关文章
- vue实例的生命周期函数
Vue的生命周期函数通常分为以下三类: ①实例创建时的生命周期函数:②实例执行时的生命周期的函数:③实例销毁时的生命周期的函数. 代码与注释详解: <!DOCTYPE html> < ...
- Vue 组件以及生命周期函数
组件相当于母版的功能 新建.vue文件,手动完善 <template><div>根节点</div></template> <script>& ...
- Vue 各个阶段生命周期函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue过滤器、生命周期函数和vue-resource
一.过滤器 使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- vue基础篇---生命周期
每个钩子函数都在啥时间触发 beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. created 实例已经创建完成之 ...
- vue父子组件生命周期函数执行顺序
vue父组件加载和销毁执行最后一个钩子函数之前先执行一遍子组件的钩子: 1.加载 父:beforecreate-created-beforeMount-(子:beforecreate-created- ...
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- 黑马vue---37-38、vue实例的生命周期
黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...
- vue组件的生命周期详解
1.生命周期&生命周期函数 生命周期:指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 生命周期函数:由vue框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...
随机推荐
- Python -- 修改、添加和删除元素
大多数列表将是动态的,这意味着列表创建后,将随着程序的运行增删元素. 修改列表元素 修改列表元素的语法与访问列表元素的语法类似.要修改列表元素,可指定表名和要修改的元素指引,再指定该元素的新值. #代 ...
- python绘制美丽花朵
from mpl_toolkits.mplot3d import Axes3D from matplotlib import cm from matplotlib.ticker import Line ...
- Js 添加cookie，写入cookie到主域
if (getCookie("content") != null && getCookie("content") != "" ...
- C#读取DLL文件获取所有类
说明 调用Web.dll 文件,获取其中的所有的WebService 参考 https://blog.csdn.net/huoliya12/article/details/78873123 流程 使用 ...
- 160个Crackerme破解
001: 第一个破解: 有两种登陆方式:序列号/名字和序列号,观察报错信息 两个报错信息,直接中文搜索字符: 第一种登陆方式报错为:sorry,xx 右键中文字符搜索,ctrl+f输入要搜索的字符,这 ...
- Java学习_Java快速入门
Java简介 安装完JDK后,需要设置一个JAVA_HOME的环境变量,它指向JDK的安装目录.在Windows下,它是安装目录,类似: C:\Program Files\Java\jdk-15 把J ...
- Java 中的PO VO DTO BO
PO 持久对象,数据: BO 业务对象,封装对象.复杂对象 ,里面可能包含多个类:DTO 传输对象,前端调用时传输 :VO 表现对象,前端界面展示. 当你业务足够简单时,一个POJO 也完全当做PO ...
- Java获取某年某月的第一天和最后一天
/** * 获取某年某月的第一天 * @Title:getFisrtDayOfMonth * @Description: * @param:@param year * @param:@param mo ...
- 嵌入式Linux-LCD显示多行文字
显示文字这里我用了freetype库. 以左上角显示两行文字: #include <sys/types.h> #include <sys/stat.h> #include &l ...
- 再看C语言-算法
通常一个程序包括算法.数据结构.程序设计方法及语言工具和环境这四个方面.其中算法是核心,算法就是解决"做什么"和"如何做"的问题.算法是程序的灵魂,项目中如果接 ...