Vue2 —— 学习(五)

一、生命周期

(一)引入案例

我们想让一行文字按一定频率逐渐变得透明

1. Vue 实例外写法

函数写在 Vue 实例外面也能实现但是不推荐 

<body><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2></div><script>const vm = new Vue({el: '#root',data: {opacity: 1}})setInterval(() => {vm.opacity -= 0.01if (vm.opacity <= 0)vm.opacity = 1}, 16);</script>
</body>
 2. Vue 实例内写法

写在 Vue 里面 不能写在 methods 里面 因为数据一变就调用定时器,一直在变,一直调用定时器就坏了 指数级调用 有很大隐患

所以我们要单独写在一个函数中,它和 data 对象并列 名字是 mounted(){} 挂载函数

Vue 完成解析并将初始的 dom 元素放入页面后 挂载完毕 才调用 mounted 这样就不会出现上面问题了

 const vm = new Vue({el: '#root',data: {opacity: 1},mounted() {setInterval(() => {this.opacity -= 0.01if (this.opacity <= 0)this.opacity = 1}, 16);},})

(二)生命周期函数

又名生命周期回调函数 生命周期钩子

像 mounted(){} 这个函数一样 的在 Vue 实例工作的时候 只有在特殊的时间点才进行调用的函数就叫生命周期函数,关键的时间点调用一些关键的函数,生命周期函数中的this 指向是 Vue 实例

(三)生命周期函数挂载流程

第一个生命周期

beforeCreat(){

}

还没进行数据代理 vm 中还没有 _data 对象

第二个生命周期

created(){

}

在进行数据监测和数据代理后

第三个生命周期

beforeMount(){

}

未经解析的 dom 结构 里面对 dom 操作无效

第四个生命周期 

mounted(){

}

经过解析的的 dom 里面可以对dom 进行操作

 template 能更新 根节点 里面只能写一个根元素,不然会报错,拿template 最外层的元素当根节点然后替换掉原来的模板,记住前面学过的 <template></template> 标签不能作为这个 模板的根节点

<body><div id="root"></div><script>const vm = new Vue({el: '#root',template: ` <div><h2>当前的n 值是{{n}}</h2><button @click="add">点我n+1</button></div>`,data: {n: 1},methods: {add() {this.n++}},})</script>
</body>

 

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

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

相关文章

大型连锁企业异地组网稳定性提升指南

随着时代的发展&#xff0c;连锁企业在网络方面面临着越来越多的挑战。这些企业在不同的地理位置设有分支机构和门店&#xff0c;可能是同城也可能是异地&#xff0c;因此需要确保各个地点之间的网络连接稳定可靠。然而&#xff0c;由于不同地区网络基础设施、延迟和带宽等方面…

代码随想录:栈与队列4-6

20.有效的括号 题目 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一…

打卡--MySQL8.0 四 (索引及执行计划)

一、索引的创建与使用 1、索引的分类 MySQL的索引包括普通索引、唯一性索引、全文索引、单列索引、多列索引和空间索引等。 &#xff08;1&#xff09;从 功能逻辑 上说&#xff0c;索引主要有 4 种&#xff0c;分别是普通索引、唯一索引、主键索引、全文索引。 &#xff08;…

【测试开发学习历程】python迭代、可迭代对象、迭代器、生成器

1 迭代Iteration 迭代Iteration&#xff1a;所谓迭代就是重复运行一段代码语句块的能力&#xff0c;就好比在一个容器中进行一层一层遍历数据&#xff0c;在应用过程中for循环最为突出。迭代就是从某个容器对象中逐个地读取元素&#xff0c;直到容器中没有元素为止。迭代迭代&…

【R基础】一组数据计算均值、方差与标准差方法及意义

【R基础】一组数据计算均值、方差与标准差方法及意义 均值、方差与标准差是用来描述数据分布情况 均值&#xff1a;用来衡量一组数据整体情况。 数据离散程度度量标准&#xff1a; 方差&#xff08;均方&#xff0c;s^2&#xff0c;总体参数&#xff0c;离均差平方和&#…

AI大模型原理科普(深度好文)

目录 认识AI大模型家族 AI是什么&#xff1f; 机器学习是什么&#xff1f; 机器学习有哪些分支&#xff1f; 什么是强化学习&#xff1f; 深度学习属于哪一类学习&#xff1f; 生成式AI和深度学习是什么关系&#xff1f; 大语言模型是什么&#xff1f; 所有大语言模型…

【Java】HashMap 源码阅读

HashMap 源码阅读 HashMap 简介 HashMap 主要用来存放键值对&#xff0c;实现了基于哈希表的 Map 接口&#xff0c;非线程安全。 HashMap 可以存放 null 的 key 和 null 值&#xff0c;但 null 作为 key 只能有一个&#xff0c;null 作为 value 可以有多个。 HashMap 有两个…

BFS广度优先搜索

import java.util.Arrays; import java.util.LinkedList; import java.util.Queue; import java.util.Scanner; // 1:无需package // 2: 类名必须Main, 不可修改public class Main {public static void main(String[] args) {Scanner scan new Scanner(System.in);//在此输入您…

业务逻辑漏洞(靶场) fiddler

目录 fiddler简介&#xff1a; 业务逻辑漏洞&#xff1a; fiddler下载 靶场&#xff1a; 实验一 ​编辑实验二&#xff08;ps 更改实验url会变&#xff0c;fiddler没抓到东西看看代理改没改&#xff09; 实验三 实验四 fiddler简介&#xff1a; 一款网络抓包工具&#…

内部类、泛型、常用API

内部类 内部类是类中的五大成分之一&#xff08;成员变量、方法、构造器、代码块、内部类&#xff09; 如果一个类定义在另一个类的内部&#xff0c;这个类就是内部类。 场景&#xff1a;当一个类的内部&#xff0c;包含了一个完整的事物&#xff0c;且这个事物没有必要单独设…

20240403-算法复习打卡day43||● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

1049. 最后一块石头的重量 II class Solution { public:int lastStoneWeightII(vector<int>& stones) {vector<int> dp(15001, 0);int sum 0;for (int i 0; i < stones.size(); i) sum stones[i];int target sum / 2;for (int i 0; i < stones.siz…

智慧城市中的物联网革命——青创智通

工业物联网解决方案-工业IOT-青创智通 得益于物联网 (IoT)的变革力量&#xff0c;智慧城市的概念正在迅速成为现实。物联网正在从根本上改变城市的运作方式&#xff0c;为城市居民带来更高的效率、可持续性和生活质量。在本文中&#xff0c;我们将探讨物联网在智慧城市中的作用…

49 样式迁移【李沐动手学深度学习v2课程笔记】

1. 样式迁移&#xff08;Style Transfer) 计算机视觉的应用之一&#xff0c;将样式图片中的样式&#xff08;比如油画风格等&#xff09;迁移到内容图片&#xff08;比如实拍的图片&#xff09;上&#xff0c;得到合成图片 可以理解成为一个滤镜&#xff0c;但相对于滤镜来讲…

基于SSM框架JAVA仓库管理系统源代码Mysql数据库(可当毕设,实训项目,设计大赛)

仓库管理系统实现的功能包括店铺管理&#xff0c;员工管理&#xff0c;部门管理&#xff0c;商品管理&#xff0c;权限管理&#xff0c;入库管理&#xff0c;出库管理&#xff0c;盘点管理&#xff0c;统计管理等功能。该项目采用了Mysql数据库&#xff0c;Java语言&#xff0c…

Hibernate多事务同时调用update(T t) ,字段被覆盖问题

前言 今天现网有个订单卡单了&#xff0c;经过排查发现没有任何异常日志&#xff0c;根据日志定位发现本应该更新的一个状态&#xff0c;也sql肯定执行了(使用了Hibernate的ORM框架)&#xff0c;但是数据库里面的状态没有更新。大概逻辑如下 String hql from orderInfo where…

大模型训练:如何解决GPU万卡互联挑战?

如何解决GPU万卡互联的挑战 近日&#xff0c;字节跳动携手北京大学研究团队发布重磅论文&#xff0c;揭示了一项革命性技术&#xff1a;将大型语言模型训练扩展至超10,000块GPU的生产系统。此系统不仅解决了万卡集群训练大模型时的效率和稳定性难题&#xff0c;更标志着人工智能…

用dbms_shared_pool.purge清除执行计划

1.Oracle 11g如何清除share pool中某条SQL的执行计划 以前在Oracle 10g数据库上,如果遇到绑定窥探导致执行计划慢的情况,想要清除某条SQL的执行计划,让它硬解析,找了很久都没有找到直接操作share pool的方法&#xff08;总不能alter system flush shared_pool&#xff09;,只能…

rocketmq和rabbitmq总是分不清?

1. 官方解答 摘自百度搜索&#xff1a; 2. 通俗易懂的回答

【Gem5】获取构建教程

gem5-tutorial-hpca-2023 1 介绍 1.1 Gem5是什么1.2 Gem5可以用来做什么1.3 获取并构建gem5 gem5-tutorial-hpca-2023 打开网址&#xff1a; github 创建教程代码空空间 “Code” -> “Codespaces” -> “Create Codespace on master” GitHub Codespaces 是一个由…

最坏情况为线性时间的第k大元素

在统计和数据分析中&#xff0c;我们经常会遇到求最大值、最小值、中位数、四分位数、Top K等类似需求&#xff0c;其实它们都属于顺序统计量&#xff0c;本文将对顺序统计量的定义和求解算法进行介绍&#xff0c;重点介绍如何在最差时间复杂度也是线性的情况下求解第k大元素。…