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框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...
随机推荐
- win10新版wsl2使用指南
本篇文章会介绍win10中wsl2的安装和使用以及遇到的常见问题比如如何固定wsl2地址等问题的总结. 一.wsl2简介 wsl是适用于 Linux 的 Windows 子系统,安装指南:适用于 Li ...
- Python 函数对象的本质
Python 函数对象本质上是 function 类的实例. 1 从示例说起 def factorial(n): '''return n!''' return 1 if n < 2 else n ...
- DotfuscatorPro防止反编译&ILSpy反编译
DotfuscatorPro_4.9可以防止你的.NET软件被反编译,可以在一定程度上防止你的软件被反编译.现在很多软件都有被反编译的现象,虽然不能做到百分百的防范,但是你至少可以先做些技术上的处理, ...
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- 使用CDN后如何配置Apache使其记录访客真实IP
今天想看看哪些地区的人访问过我的网站,于是打开Apache网站响应日志,把访客IP复制到百度,发现搜到的全部都是我是用的CDN的节点IP,真实的访客IP并没有被记录. 如图所示,上面的103.45.7 ...
- （十一）、head--查看文件前若干部分，tail--查看文件后若干部分
一.命令描述与格式 head用于查看文件前面部分,tail用于查看文件的末尾部分 格式:head/tail [-选项] 文件 head选项: -c:处理文件若干字节数,加b.k.m -n:前 ...
- 【mybatis-plus】主键id生成、字段自动填充
一.主键id的生成 数据库表里通常都会有一个主键id,来作为这条数据的唯一标识. 常见的方式 数据库自动增长 这种很常见了,可以做到全库唯一.因为id是天然排序的,对于涉及到排序的操作会很方便. UU ...
- 关于META-INF下的spring.factories文件
spring.factories 文件是springboot提供的一种实例化bean方式 org.springframework.boot.autoconfigure.EnableAutoConfig ...
- sql将两个查询结果拼接到一块，去掉重复，动态sql
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...
- java数组基础知识
数组的定义:int[] array=new array[n];int array[]={, , , ,};定义了数组,JVM就会给其一个空间,数组是应用类型的数据类型,其存储方式是随机存储. 数组的遍 ...