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框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...
随机推荐
- MySQL获取上月第一天、上月最后日、本月第一天、本月最后日的方法
直接贴SQL语句了 #上月第一天 SELECT DATE_FORMAT(DATE_SUB(CURDATE(),INTERVAL 1 MONTH),'%Y-%m-01'); #上月最后日 SELECT ...
- 安装篇六：安装PHP(7.2.29版本)
准备环境,下载依赖软件 # No1:在前面安装好的基础上,关闭iptables.selinux # No2:安装依赖包 yum install zlib-devel bzip2-devel -y &l ...
- Java Int类型与字符，汉字之间的转换
/** * java 中的流主要是分为字节流和字符流 * 再一个角度分析的话可以分为输入流和输出流 * 输入和输出是一个相对的概念 相对的分别是jvm虚拟机的内存大小 * 从另一个角度讲Java或者用 ...
- Kibana查询语言（KQL）
一.前言 现在大多数的公司都会使用ELK组合来对日志数据的收集.存储和提供查询服务,这里就不介绍什么是ELK了,只介绍一些EKL中的查询,也就是K(kibana). 查询数据库,如果是MySQL,那么 ...
- Java源码研究001：关于List的并发修改异常
这个就是实现一个简单的 ArrayList 的遍历,如果存在一个为"aaa"的值,就添加一个"ccc" package Array; import java.u ...
- springboot 中yml配置
springboot 中各种配置项纪录 1. @Value 最早获取配置文件中的配置的时候,使用的就是这个注解,SpEL表达式语言. // 使用起来很简单 @Value("${config. ...
- [leetcode]103. Binary Tree Zigzag Level Order Traversal二叉树Z字形层序遍历
相对于102题,稍微改变下方法就行 迭代方法: 在102题的基础上,加上一个变量来判断是不是需要反转 反转的话,当前list在for循环结束后用collection的反转方法就可以实现反转 递归方法: ...
- 给2021年的我立几个FLAG
看多了大牛的年终总结,我也懒得写了,反正写出来也没人看. 其实上面都是借口,我只是完全没有写年终总结的习惯. 为啥呢?因为这些年过的平平无奇,并没有什么特别出彩的事情. 如果有,嗯,2020年,我结婚 ...
- 5.从零开始创建一个QT窗口按钮
如何创建一个QT项目 如何创建一个QT项目 1.创建新项目 2.配置选择 3.增加按钮 4.按钮和窗体的大小标签图标设置 5.信号与槽 6.自定义信号与槽 代码 1.创建新项目 点击文件->新建 ...
- FileZilla使用教程
FileZilla使用教程和问题汇总 正式开始之前我还是想闲聊几句,毕竟调试解决这些问题,整整耗了我一天半的时间.前不久学校要求上交一个web大作业,然后我们宿舍就寻思光做出来前后端搞头不大,不如整个 ...