【生命周期】

生命周期

  • 1 引出生命周期
  • 2 分析生命周期
  • 3 总结生命周期

1 引出生命周期

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>引出生命周期</title><script src="../JS/vue.js"></script>
</head>
<body><!--总结生命周期：1.又名：生命周期回调函数、生命周期函数、生命周期钩子。2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm 或 组件实例对象。--><div id="root"><!-- <h2 :style="{opacity:opacity}">欢迎学习Vue</h2> opacity透明度,前一个是CSS属性,后一个是数据名 --><!-- 采用对象的简写形式，可简写为： --><h2 :style="{opacity}">欢迎学习Vue</h2></div>
</body>
<script>Vue.config.productionTip = false// const vm = new Vue({new Vue({el: '#root',data: {opacity:1},methods:{},// Vue完成模板的解析并把初始的真实的DOM元素挂载(放入)页面后调用mounted()函数mounted(){setInterval(() => {this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16);}})// 通过外部的循环定时器实现(不推荐)/* setInterval(() => {vm.opacity -= 0.01if(vm.opacity <= 0) vm.opacity = 1},16); */
</script>
</html>

在这里插入图片描述

2 分析生命周期

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>分析生命周期</title><script src="../JS/vue.js"></script>
</head>
<body><div id="root"><h2 v-text="n"></h2><h2>当前的n值是：{{n}}</h2><button @click="add">点我n+1</button><button @click="bye">点我销毁vm</button></div>
</body>
<script>Vue.config.productionTip = falsenew Vue({el: '#root',data: {n:1},methods:{add(){console.log('add');this.n++},bye(){console.log('bye');this.$destroy()}},watch:{n(){console.log('n变了');}},beforeCreate() {console.log('beforeCreate');// console.log(this); // 此时vm里没有_data、vm.n、vm.add()// debugger; // 卡一个顿点},created() {console.log('created');// console.log(this); // 此时vm里有了_data、vm.n、vm.add()、getter()、setter()// debugger;},beforeMount() {console.log('beforeMount');// console.log(this); // 此时页面呈现的是未经编译的DOM结构// debugger;},mounted() { // 重要的钩子console.log('mounted');// console.log(this); // 此时页面呈现的是经过编译的DOM结构// debugger;},beforeUpdate() {console.log('beforeUpdate');// console.log(this.n); // 数据是新的 但页面是旧的// debugger;},updated() {console.log('updated');//console.log(this.n); // 数据是新的 页面也是新的// debugger;},beforeDestroy(){ // 重要的钩子console.log('beforeDestroy');// console.log(this.n); // 此时能拿到数据// this.add() // 此时调用了add() 但页面没发生变化// debugger;},destroyed() {console.log('destroyed');// debugger;}})
</script>
</html>

在这里插入图片描述

3 总结生命周期

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>总结生命周期</title><script src="../JS/vue.js"></script>
</head>
<body><!--总结常用的生命周期钩子：1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。关于销毁Vue实例1.销毁后借助Vue开发者工具看不到任何信息。2.销毁后自定义事件会失效，但原生DOM事件依然有效。3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。--><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2><button @click="opacity = 1">透明度设置为1</button><button @click="stop">点我停止变换</button></div>
</body>
<script>Vue.config.productionTip = false// const vm = new Vue({new Vue({el: '#root',data: {opacity:1},methods:{stop() {// clearInterval(this.timer) // 清除定时器(温柔) 点击停止变换后再点透明度为1 透明度改变this.$destroy() // 暴力清除 点击停止变换后再点透明度为1不再发生变化 此时vm关了 但定时器没关}},// Vue完成模板的解析并把初始的真实的DOM元素挂载(放入)页面后调用mounted()函数mounted(){this.timer = setInterval(() => {this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16);},beforeDestroy() {clearInterval(this.timer) // 清除定时器}})
</script>
</html>

在这里插入图片描述

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

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

相关文章

【Java 进阶篇】JDBC PreparedStatement 详解

【Java 进阶篇】JDBC PreparedStatement 详解

在Java中&#xff0c;与关系型数据库进行交互是非常常见的任务之一。JDBC&#xff08;Java Database Connectivity&#xff09;是Java平台的一个标准API&#xff0c;用于连接和操作各种关系型数据库。其中&#xff0c;PreparedStatement 是 JDBC 中一个重要的接口&#xff0c;用…
阅读更多...
跟着顶级科研报告IPCC学绘图：温度折线/柱图/条带/双y轴

跟着顶级科研报告IPCC学绘图：温度折线/柱图/条带/双y轴

复现IPCC气候变化过程图 引言 升温条带Warming stripes&#xff08;有时称为气候条带&#xff0c;目前尚无合适且统一的中文释义&#xff09;是数据可视化图形&#xff0c;使用一系列按时间顺序排列的彩色条纹来视觉化描绘长期温度趋势。 在IPCC报告中经常使用这一方案 IPCC是…
阅读更多...
认识柔性数组

认识柔性数组

在C99中&#xff0c;结构中的最后一个元素允许是未知大小的数组&#xff0c;这就叫做柔性数组成员 限制条件是&#xff1a; 结构体中最后一个成员未知大小的数组 1.柔性数组的形式 那么我们怎样写一个柔性数组呢 typedef struct st_type {int i;int a[0];//柔性数组成员 }ty…
阅读更多...
SpringBoot 可以同时处理多少请求

SpringBoot 可以同时处理多少请求

一、前言 首先&#xff0c;在Spring Boot应用中&#xff0c;我们可以使用 Tomcat、Jetty、Undertow 等嵌入式 Web 服务器作为应用程序的运行容器。这些服务器都支持并发请求处理的能力。另外&#xff0c;Spring Boot 还提供了一些配置参数&#xff0c;可以对 Web 服务器进行调…
阅读更多...
互联网Java工程师面试题·MyBatis 篇·第二弹

互联网Java工程师面试题·MyBatis 篇·第二弹

目录 16、Xml 映射文件中&#xff0c;除了常见的 select|insert|updae|delete标签之外&#xff0c;还有哪些标签&#xff1f; 17、Mybatis 的 Xml 映射文件中&#xff0c;不同的 Xml 映射文件&#xff0c;id 是否可以重复&#xff1f; 18、为什么说 Mybatis 是半自动 ORM 映射…
阅读更多...
Vue项目搭建图文详解教程

Vue项目搭建图文详解教程

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 预备工作 请在本地创建文件夹用于存放Vue项目&#xff0c;例如&#xff1a;创建HelloWorld文件夹存放即将创建的Vue新项目。 创建Vue项目 首先&#xff0c;请在DOS中将目录…
阅读更多...
踩坑 | vue动态绑定img标签src属性的一系列报错

踩坑 | vue动态绑定img标签src属性的一系列报错

文章目录 踩坑 | vue项目运行后使用require()图片也不显示问题描述vue中动态设置img的src不生效问题的原因require is not defined 解决办法1&#xff1a;src属性直接传入地址解决办法2 踩坑 | vue项目运行后使用require()图片也不显示 问题描述 在网上查阅之后&#xff0c;发…
阅读更多...
深度学习笔记之线性代数

深度学习笔记之线性代数

深度学习笔记之线性代数 一、向量 在数学表示法中&#xff0c;向量通常记为粗体小写的符号&#xff08;例如&#xff0c;x&#xff0c;y&#xff0c;z&#xff09;当向量表示数据集中的样本时&#xff0c;它们的值具有一定的现实意义。例如研究医院患者可能面临的心脏病发作风…
阅读更多...
＜C++＞ STL_bitset使用和模拟实现

＜C++＞ STL_bitset使用和模拟实现

bitset的介绍 位图的引入 给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在这40亿个数中&#xff1f; 要判断一个数是否在某一堆数中&#xff0c;我们可能会想到如下方法&#xff1a; 将这一堆数进行排序&#xff0…
阅读更多...
Linux-正则三剑客

Linux-正则三剑客

目录 一、正则简介 1.正则表达式分两类&#xff1a; 2.正则表达式的意义 二、Linux三剑客简介 1.文本处理工具&#xff0c;均支持正则表达式引擎 2.正则表达式分类 3.基本正则表达式BRE集合 4.扩展正则表达式ere集合 三、grep 1.简介 2.实践 3.贪婪匹配 四、sed …
阅读更多...
STM32Cubemx新建F429基础工程

STM32Cubemx新建F429基础工程

配置STM32CubeMX 配置KEY 配置USART1 配置RCC Project Manager Toolchain 选择 MDK-ARM Code Generator 配置如下 GENERATE CODE 即可 配置Keil5 魔术棒配置 – Target – 勾选 Use MicroLIB – Debug – Flash Download – 勾选Reset and Run 基础代码 /* Private incl…
阅读更多...
GD32F103x IIC通信

GD32F103x IIC通信

1. IIC通信 1.IIC的介绍 IIC总线有两条串行线&#xff0c;其一是时钟线SCK&#xff08;同步&#xff09;&#xff0c;其二是数据线SDA。只有一条数据线属于半双工。应用中&#xff0c;单片机常常作为主机&#xff0c;外围器件可以挂载多个。&#xff08;当然主机也可以有多个。…
阅读更多...
AJAX--Express速成

AJAX--Express速成

一、基本概念 1、AJAX(Asynchronous JavaScript And XML)&#xff0c;即为异步的JavaScript 和 XML。 2、异步的JavaScript 它可以异步地向服务器发送请求&#xff0c;在等待响应的过程中&#xff0c;不会阻塞当前页面。浏览器可以做自己的事情。直到成功获取响应后&#xf…
阅读更多...
【Spring MVC】MVC如何浏览器请求（service方法）

【Spring MVC】MVC如何浏览器请求（service方法）

文章目录 1. DispatcherServlet 的 service 方法1.1. processRequest 方法1.2. doService 方法 背景&#xff1a;平时我们学习 MVC 重点关注的时DispatcherServlet 的 doDispatcher 方法&#xff0c;但是在 doDispatcher 方法之前 还有请求处理的前置过程&#xff0c;这个过程…
阅读更多...
vue 使用 创建二维数组响应数据 渲染 echarts图标

vue 使用 创建二维数组响应数据 渲染 echarts图标

目前我遇到的情况就是用动态的二维数组数据渲染echarts图标&#xff0c;我们从后端收到的接口一般是个一维数组&#xff0c;需要手动构建并且保证响应式。接下来我做了个案例 一、案例总逻辑 1. 先创建一个vue项目 2. 添加 echarts依赖 3. 模拟数据请求&#xff0c;构建二维数组…
阅读更多...
Axios post请求出现500错误

Axios post请求出现500错误

笔者在编写前端form表单传后端数据的时候&#xff0c;出现了以下问题 一、问题场景 当我用axios发送post请求的时候&#xff0c;出现了500错误 笔者找了很长时间错误&#xff0c;代码没问题&#xff0c;后端接口也没问题&#xff0c;后来发现问题出在实体类上了 当前端post请…
阅读更多...
数据结构： 数组与链表

数据结构： 数组与链表

目录 1 数组 1.1 数组常用操作 1. 初始化数组 2. 访问元素 3. 插入元素 4. 删除元素 5. 遍历数组 6. 查找元素 7. 扩容数组 1.2 数组优点与局限性 1.3 数组典型应用 2 链表 2.1 链表常用操作 1. 初始化链表 2. 插入节点 3. 删除…
阅读更多...
10.03

10.03

代码 #include <iostream>using namespace std; class cz { private:int num1; //实部int num2; //虚部 public:cz(){}cz(int a,int b):num1(a),num2(b){}cz(const cz &other):num1(other.num1),num2(other.num2){}~cz(){}const cz operator(const cz &othe…
阅读更多...
websocket逆向【python实现http/https拦截】

websocket逆向【python实现http/https拦截】

python实现http拦截 前言：为什么要使用http拦截一、技术调研二、技术选择三、使用方法前言：为什么要使用http拦截 大多数爬虫玩家会直接选择API请求数据，但是有的网站需要解决扫码登录、Cookie校验、数字签名等，这种方法实现时间长，难度高。需求里面不需要高并发，有没有…
阅读更多...
5月22日比特币披萨日，今天你吃披萨了吗？

5月22日比特币披萨日，今天你吃披萨了吗？

比特币披萨日 1. Laszlo Hanyecz2. 最贵披萨诞生记3. 梭哈买披萨4. 未完待续 2010年5月22日&#xff0c;美国佛罗里达州的程序员Laszlo Hanyecz&#xff08;拉兹洛哈涅克斯&#xff09;用10000个比特币购买了棒约翰&#xff08;Papa Johns&#xff09;比萨店一个价值25美元的奶…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023