Javascript - Vue - vue对象的生命周期
vue对象的生命周期
从vue的创建到销毁会经过一系列的事件,这是vue对象的生命周期。
创建期间的生命周期函数
<h3 id="h3">{{msg}}</h3>
</div>
el: "#box",
data: {
msg: "hello"
},
methods: {
show: function () {
alert("执行了show函数");
}
},
//vue被完整创建之前触发,内部还没有任何属性
beforeCreate() {
this.show();//无法调用show方法
},
//vue已完整创建出来(其属性已初始化)之后触发
created: function () {
this.show(); //能调用show方法
},
//vue已完整创建出来(其属性已初始化)但数据尚未插入到dom元素时触发
beforeMount: function () {
alert(document.getElementById("h3").innerText);//输出{{msg}}的字符表示
},
//vue已完整创建出来(其属性已初始化),数据已插入dom元素时触发
mounted: function () {
alert(document.getElementById("h3").innerText); //正确输出msg的值
}
});
运行期间的生命周期函数
<h3 id="h3">{{msg}}</h3>
<input type="button" value="OK" @click="changeData"/> //点击按钮,更改msg的值
</div>
el: "#box",
data: {
msg:"hello"
},
methods: {
changeData: function () {
this.msg = "world";
}
},
//在vue内部的data数据已经更新且页面上的数据尚未更新之前触发
beforeUpdate: function () {
alert(document.getElementById("h3").innerText); //输出hello
alert(this.msg); //输出world
},
//数据在vue内部和页面上都更新完成之后触发
updated: function () {
alert(document.getElementById("h3").innerText); //输出world
alert(this.msg); //输出world
}
});
销毁期间的生命周期函数
el: "#box",
beforeDestroy: function () {
//组件销毁前,此时vue的各个属性都可用
},
destroyed: function () {
//组件销毁后,此时vue的各个属性不可用
}
});
Javascript - Vue - vue对象的生命周期的更多相关文章
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- Vue2.5笔记:Vue的实例与生命周期
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...
- vue基本配置和生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- [原创]java WEB学习笔记94:Hibernate学习之路---session 的管理,Session 对象的生命周期与本地线程绑定
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- [原创]java WEB学习笔记47:Servlet 监听器简介, ServletContext(Application 对象), HttpSession (Session 对象), HttpServletRequest (request 对象) 监听器,利用listener理解 三个对象的生命周期
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- hibernate 持久化对象的生命周期 2.1
持久化对象的生命周期 瞬态(自由态) 表示对象在内存中存在,在数据库中没有数据相关,比如刚刚new出来的一个对象 持久态 持久态指的是持久化对象处于由Hibernate管理的状态,这种状态下持久化对象 ...
- Java 对象的生命周期
Java对象的生命周期 在Java中,对象的生命周期包含下面几个阶段: 1. 创建阶段(Created) 2. 应用阶段(In Use) 3. 不可见阶段(Invisib ...
- 管中窥豹——从对象的生命周期梳理JVM内存结构、GC调优、类加载、AOP编程及性能监控
如题,本文的宗旨既是透过对象的生命周期,来梳理JVM内存结构及GC相关知识,并辅以AOP及双亲委派机制原理,学习不仅仅是海绵式的吸收学习,还需要自己去分析why,加深对技术的理解和认知,祝大家早日走上 ...
- [翻译] 编写高性能 .NET 代码--第二章 GC -- 减少分配率, 最重要的规则,缩短对象的生命周期,减少对象层次的深度,减少对象之间的引用,避免钉住对象(Pinning)
减少分配率 这个几乎不用解释,减少了内存的使用量,自然就减少GC回收时的压力,同时降低了内存碎片与CPU的使用量.你可以用一些方法来达到这一目的,但它可能会与其它设计相冲突. 你需要在设计对象时仔细检 ...
随机推荐
- c# 简易绘制C语言头文件包含关系图 v2.0
老规矩,先上图 节点样式说明: 1.粉色圆角,说明该节点下有循环引用 2.黄色菱形,说明该节点代表的文件在项目目录下未找到. 3.红色圆角,说明循环引用(从开始到最终,这种感情没变过,没有谁..... ...
- 【Alpha】第九次Scrum meeting
今日任务一览: 姓名 今日完成任务 所耗时间 刘乾 由于发现之前版本的模板引擎存在致命bug,所以重新更换,现在使用jinja2作为模板渲染引擎. 3 鲁聃 卤蛋今天为了给编译老师做视频,没有做软工项 ...
- DPDK环境搭建及Helloworld样例
配置虚拟机环境 多张网卡,一张网卡是无法运行DPDK的,至少要两张. 多核CPU,可以在实现多个DPDK逻辑调度核lcore. DPDK依赖参考:http://www.cnblogs.com/vanc ...
- 蜗牛慢慢爬 LeetCode 16. 3Sum Closest [Difficulty: Medium]
题目 Given an array S of n integers, find three integers in S such that the sum is closest to a given ...
- 【转载】Understanding When to use RabbitMQ or Apache Kafka
https://content.pivotal.io/rabbitmq/understanding-when-to-use-rabbitmq-or-apache-kafka RabbitMQ: Erl ...
- php学习部分总结
php Apache 阿帕奇PHP 解释器MySQL 数据库 php php文件后缀就是.php 比如1.php 2.phpphp代码 要写在<?php echo "assss&quo ...
- django学习--2 模板
Django 模板 在上一章节中我们使用 django.http.HttpResponse() 来输出 "Hello World!".该方式将数据与视图混合在一起,不符合 Djan ...
- Windows下PyInstaller的使用教程
直接使用Python开发的软件时有许多不方便的地方,如需要安装特定的Python环境,需要安装依赖库.为了便于部署,需要将Python源代码编译成可执行文件,编译后的可执行文件就能脱离python环境 ...
- Jira 的 数据库备份恢复 简单过程
1 发现jira的备份恢复很简单, 只需要导入导出一个zip包即可 导出 选择系统 管理员入口登录 选择导入导出 进行备份系统数据 选择一个文件名就能备份 备份结果 将文件copy到上一一级目录的 i ...
- 小程序开发 js里面array操作的方法列表。