Vue学习笔记-activated和deactivated生命周期

作用

路由组件所独有的2个生命周期

  • activated生命周期函数用于在路由组件每次由消失到出现时所调用的函数
  • deactivated生命周期函数用于路由组件每次由出现到消失时(无论是否缓存)所调用的函数

案例

定义一个NewsVue组件,要求:当该组件出现时,部分字体的透明度周期性变化,当该组件被切换走时,需要被缓存,但需要注销其定时器

  1. 在其父组件中,需要将NewsVue组件设置为缓存
<keep-alive include="NewsVue"><router-view></router-view></keep-alive>
  1. 在NewsVue模板中设置对应的字体透明度并绑定,继而编写相关的生命周期函数
<template><ul><li :style="{opacity}">欢迎学习Vue</li><li>news001 <input type="text"/> </li><li>news002 <input type="text"/> </li><li>news003 <input type="text"/> </li></ul>
</template>
<script>
export default {name: "NewsVue",data(){return {opacity:1,}},activated() {//console.log('News组件被激活了')this.timer =setInterval(()=>{this.opacity-=0.01;if(this.opacity <= 0){this.opacity = 1;}},16)},deactivated() {//console.log('News组件失活了')clearInterval(this.timer);}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/202034.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyTorch分布式overview

PyTorch分布式overview 文章目录 PyTorch分布式overviewtorch.nn.DataParallel分布式数据并行训练(DistributedDataParallel)接触DDP, 从这个例子开始分布式数据并行(DistributedDataParallel)基本用例(Basic Use Case)Setup 单机的模型并行最好的实践DataParallel和Distribute…

C语言能判断一个变量是int还是float吗?

C语言能判断一个变量是int还是float吗&#xff1f; 在开始前我有一些资料&#xff0c;是我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心整理了一份「C语言从专业入门到高级教程工具包」&#xff0c;点个关注&#xff0c;全部无偿共享给大家&#xff01;&…

C语言词法陷阱

目录 前言 1、理解函数声明 最简单的声明符 函数和指针类型 其它组合 typedef简化 2、运算符优先级 C语言运算符优先级表 补充内容 3、作为语句结束标志的分号 多写分号 漏写分号 分号与函数声明 4、switch语句 5、函数调用 6、“悬挂”else引发的问题 前言 …

初识消息队列

1、消息 消息&#xff08;Message&#xff09;是指在应用间传送的数据。消息可以非常简单&#xff0c;比如只包含文本字符串&#xff0c;也可以更复杂&#xff0c;可能包含嵌入对象。 2、消息队列 消息队列&#xff08;Message Queue&#xff09;是一种应用间的通信方式&#…

学生档案管理系统研究

摘 要 学生档案管理系统是一个教育单位不可缺少的部分,它的内容对于学校的决策者和管理者来说都至关重要,所以学生档案管理系统应该能够为用户提供充足的信息和快捷的查询手段。但一直以来人们使用传统人工的方式管理文件档案&#xff0c;这种管理方式存在着许多缺点,如:效率低…

Ant Design正式推出企业级设计体系,抢先了解!

企业级产品设计体系AntDesign是蚂蚁集团体经过大量项目实践和总结&#xff0c;逐步打磨出的产品。随着这两年B端产品的逐渐白热化&#xff0c;越来越多的用户对更好的用户体验有了进一步的要求。 作为专门为国内生产研究团队量身定制的在线协作工具&#xff0c;设计师可以直接在…

Kubernetes(K8s)DashBoard的使用-11

DashBoard 之前在kubernetes中完成的所有操作都是通过命令行工具kubectl完成的。其实&#xff0c;为了提供更丰富的用户体验&#xff0c;kubernetes还开发了一个基于web的用户界面&#xff08;Dashboard&#xff09;。用户可以使用Dashboard部署容器化的应用&#xff0c;还可以…

tomcat AJP文件包含漏洞(CVE-2020-1938)

漏洞介绍 CVE-2020-1938 是一个影响 Tomcat 的 AJP 文件包含漏洞。攻击者可以利用该漏洞通过 Tomcat AJP Connector 读取或包含 Tomcat 上所有 webapp 目录下的任意文件,例如配置文件或源码。 如果目标应用有文件上传功能,攻击者还可以利用文件包含漏洞实现远程代码执行,造成…

【EI会议征稿中】第三届光学与机器视觉国际学术会议(ICOMV 2024)

第三届光学与机器视觉国际学术会议(ICOMV 2024) 2024 3rd International Conference on Optics and Machine Vision 第三届光学与机器视觉国际学术会议(ICOMV 2024)将于2024年1月19-21日在中国南昌举行。本次会议将围绕“光学”与"机器视觉”等研究领域展开讨论&#xf…

群晖Docker搭建HomeAssistant,结合内网穿透实现远程访问智能家居控制中心

使用群晖Docker搭建HomeAssistant并实现异地公网访问 文章目录 使用群晖Docker搭建HomeAssistant并实现异地公网访问一、下载HomeAssistant镜像二、内网穿透HomeAssistant&#xff0c;实现异地控制智能家居三、使用固定域名访问HomeAssistant HomeAssistant是一个可以控制 苹果…

java8 升级 java11

1.安装java11 1.1 安装参考 ​​​​​​LINUX安装JDK_liunx上安装ocean-CSDN博客 1.2 检查 java -version 2.Maven 项目pom文件修改 <properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEnc…

外包干了一个月,技术明显进步。。。。。

先说一下自己的情况&#xff0c;本科生生&#xff0c;19年通过校招进入南京某软件公司&#xff0c;干了接近3年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了3年的功能测试…

论文阅读 - VGAER: Graph Neural Network Reconstruction based Community Detection

https://arxiv.org/pdf/2201.04066.pdf 社群检测是网络科学中一个基础而重要的问题&#xff0c;但基于图神经网络的社群检测算法为数不多&#xff0c;其中无监督算法几乎是空白。 本文通过将高阶模块化信息与网络特征融合&#xff0c;首次提出了基于变异图自动编码器重构的社群…

Verilog中generate的用法

&#xff08;一&#xff09;generate语法 generate 在设计中&#xff0c;很多情况下需要编写很多结构相同但是参数不同的赋值语句或者逻辑语句&#xff0c;如果在参数量很大的的情况下&#xff0c;原本的列举就会显得心有余而力不足。c语言中常用for语句来解决此类问题&#xf…

手写深拷贝

手写深拷贝 前言: 需要先了解 JS 的数据类型 一、浅拷贝、深拷贝区别 浅拷贝会创建一个新的对象&#xff0c;新对象有着与原始对象相同的属性值&#xff0c;如果 属性是基本类型&#xff0c;拷贝的就是基本类型的值属性是引用类型&#xff0c;拷贝的就是内存地址&#xff0…

云服务器节点选择

随着云计算的发展&#xff0c;云服务器已经成为许多企业和个人的首选。但是&#xff0c;在选择云服务器节点时&#xff0c;面临的一个重要问题是如何在性能和成本之间取得平衡。本文将探讨云服务器节点选择的关键因素&#xff0c;并提供一些建议&#xff0c;以帮助用户做出明智…

算法——二分查找

二分算法简介&#xff1a; 二分查找算法只适用于数组有序的情况&#xff1f;&#xff08;只要数组中存在某种规律就可以用&#xff09;模版&#xff1a; 朴素的二分模版查找左边界的二分模版查找右边界的二分模版 朴素二分模版 while(left < right){int mid left (right-l…

Qt之QGraphicsView —— 笔记1:绘制简单图元(附完整源码)

效果 相关类介绍 QGraphicsView类提供了一个小部件,用于显示QGraphicsScene的内容。QGraphicsView在可滚动视口中可视化。QGraphicsView将滚动其视口,以确保该点在视图中居中。 QGraphicsScene类 提供了一个用于管理大量二维图形项的场景。请注意,QGraphicsScene没有自己的视…

【Openstack Train】十六、swift安装

OpenStack Swift是一个分布式对象存储系统&#xff0c;它可以为大规模的数据存储提供高可用性、可扩展性和数据安全性。Swift是OpenStack的一个核心组件&#xff0c;它允许用户将大量的数据存储在云上&#xff0c;并且可以随时访问、检索和管理这些数据。 Swift的设计目标是为了…