当前位置： 首页 > news >正文

vue中的生命周期和VueComponent实例对象

news 2026/2/7 20:15:30

生命周期

  • 生命周期又叫生命周期钩子，生命周期函数

  • 生命周期是，Vue在关键的时刻帮我们调用的一些特殊名字的函数

  • 生命周期的this指向vm或者组件实例对象

  • mounted会将初始化的Dom挂载到页面上

  • <template><div class="hello"><!-- 第一个是css样式,第二个变量名 opacity为指定一个元素的不透明度--><h3 :style="{opacity:opacity}">会变化的字体</h3><!-- 缩写形式 --><!-- <h3 :style="{opacity}"></h3> --></div>
</template>
​
<script>
export default {name: 'Select',data () {return {opacity: 1}},// mounted是生命周期函数。用于把初始化的DOM元素放到页面后(也叫做挂载完毕后),就调用mountedmounted(){// 设置定时器setInterval(()=>{this.opacity -= 0.01if(this.opacity <= 0)this.opacity = 1},16)}
}
</script>

    组件

  • 组件是用来实现局部功能效果的代码集合（html/css/js/image...)

  • 组件的作用为： 复用编码,简化项目编码，提高运行效率

  • 模块化和组件化的区别：当应用中的js都以模块化编写时，这个应用为模块化应用。当应用中的功能都是多组件方式编写。这个应用就是组件化的应用

  • 关于VueComponent

  • School组件本质上是一个名为Component的构造函数，且不是程序员定义的，是Vue.extend生成的

  • 我们只需要写< school/>(这个只有脚手架有效)或者< school>< /school>。Vue解析时会帮我们创建school组件的实列对象。

  • 注意：每次调用Vue.extend。返回的都是一个全新的VueCompon

  • 关于this指向：

  • 1、组件配置中：

  • data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象

  • 2、new.Vue()配置中：

  • data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是Vue实例对象

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- root为容器,注册成功即可使用School组件 --><div id="root"><School></School></div>
​
</body><script type="text/javascript">Vue.config.productionTip = false// 定义school组件,extends为继承的意思。但这里少了s。用于定义VueComponentconst School = Vue.extend({name: 'School',// 用``而不是''这样的好处是可以换行书写，''只能单行书写代码。换行则报错template: `// 错误写法，// <h2>{{name}}<h2>// <h3>{{address}}<h3>// 正确的写法,需要加入div将所有模块包起来。符合模块化开发<div><h2>{{name}}<h2><h3>{{address}}<h3></div>`,data(){return {name: 'school',address: '广东'}},})// vm是一个构造函数，{}为配置项new Vue({el:'#root',// vm管理所有的组件,故每个组件都要来vm这里注册才能使用。//为方便管理，为vm设置一个管理者(app)，vm直接管理app。而app管理所有的组件。以下代码可以认为School就是管理者components:{School}})</script>
</html>

相关文章：

vue中的生命周期和VueComponent实例对象

生命周期 生命周期又叫生命周期钩子&#xff0c;生命周期函数 生命周期是&#xff0c;Vue在关键的时刻帮我们调用的一些特殊名字的函数 生命周期的this指向vm或者组件实例对象 mounted会将初始化的Dom挂载到页面上 <template><div class"hello"><…...

编程日记 2023/12/24 19:22:58

Hooked协议掀起WEB3新浪潮

随着区块链技术和加密货币的兴起&#xff0c;币圈已经成为全球范围内的一个热门领域。在这个充满机遇与挑战的行业中&#xff0c;Hook机制正逐渐成为一种重要的技术手段&#xff0c;为投资者、开发者以及相关机构提供了更多的选择和可能性。本文将详细介绍币圈中的Hook机制&…...

编程日记 2023/12/24 19:21:57

【图文教程】windows 下 MongoDB 介绍下载安装配置

文章目录 介绍MySQL 之间的区别和适用场景差异数据模型&#xff1a;查询语言&#xff1a;可扩展性&#xff1a;数据一致性&#xff1a; 下载安装环境变量配置 介绍 MongoDB 是一种开源的、面向文档的 NoSQL 数据库管理系统。它使用灵活的文档模型来存储数据&#xff0c;这意味…...

编程日记 2023/12/24 19:19:56

算法复杂度-BigO表示法

1.时间复杂度--大O表示法 算法的渐进时间复杂度&#xff0c;T(n)O(f(n)) T&#xff08;n&#xff09;表示算法的渐进时间复杂度 f&#xff08;n&#xff09;表示代码执行的次数 O&#xff08;&#xff09;表示正比例关系 2.常用的时间复杂度量级 3.举例 &#xff08;1&am…...

编程日记 2023/12/24 19:17:54

测试理论知识五：功能测试、系统测试、验收测试、安装测试、测试的计划与控制

模块测试的目的是发现程序模块与其接口规格说明之间的不一致。 功能测试的目的是为了证明程序未能符合其外部规格说明。 系统测试的目的是为了证明软件产品与其初始目标不一致。 1. 功能测试 功能测试是一个试图发现程序与其外部规格说明之间存在不一致的过程。功能测试通…...

编程日记 2023/12/24 19:16:53

太阳能爆闪警示灯

适用场所&#xff1a; 适用于高压线,塔吊,路政,船舶,种植,塔机,航海航道等场所起警示作用。 产品特点&#xff1a; 光控无开关&#xff0c;白天不闪&#xff0c;昏暗环境自动闪烁&#xff0c;无需手动操作&#xff0c;省时省事; 采用红色LED作光源&#xff0c;亮度高&#…...

编程日记 2023/12/24 19:15:52

怎么为pdf文件添加水印？

怎么为pdf文件添加水印&#xff1f;PDF是一种很好用的文件格式&#xff0c;这种格式能够很有效的保护我们的文件&#xff0c;但有时可能还会被破解&#xff0c;这种时候在PDF上添加水印就是比较好的方法。 综上所述&#xff0c;PDF是保密性很强的文件&#xff0c;但添加水印能够…...

编程日记 2023/12/24 19:13:51

基于ssm医药信息管理系统论文

基于SSM的医药信息管理系统的设计与实现 摘要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。以前相关行业对于医药信息的管理和控制&#xff0c;采用人工登记的方式保存相关数据&#xff…...

编程日记 2023/12/24 19:12:50

Ceph存储体系架构？

Ceph体系架构主要由RADOS和RADOS GW和RBD以及CephFS构成。 RADOS&#xff08;Reliable, Autonomic Distributed Object Store&#xff09;是Ceph的底层核心&#xff0c;RADOS本身也是分布式存储系统&#xff0c;CEPH所有的存储功能都是基于RADOS实现。RADOS由两个组件组成&…...

编程日记 2023/12/24 19:08:46

详解现实世界资产（RWAs）

区块链中的现实世界资产&#xff08;RWAs&#xff09;是代表实际和传统金融资产的数字通证&#xff0c;如货币、大宗商品、股票和债券。 实际世界资产&#xff08;RWA&#xff09;的通证化是区块链行业中最大的市场机会之一&#xff0c;潜在市场规模可达数万万亿美元。理论上&…...

编程日记 2023/12/24 19:03:42

Windows漏洞利用开发——利用ROP绕过DEP保护

实验6 Windows漏洞利用开发 6.1实验名称 Windows漏洞利用开发 6.2实验目的 学习windows漏洞利用开发&#xff0c;使用kali linux相关工具对windows内目标程序进行漏洞利用 6.3实验步骤及内容 第三阶段&#xff1a;利用ROP绕过DEP保护 了解DEP保护理解构造ROP链从而绕过DEP…...

编程日记 2023/12/24 19:02:42

合并两个有序链表算法(leetcode第21题)

题目描述&#xff1a; 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a;输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例 2&#xff1a;输入&#xff1a;l1 [], l2 [] 输…...

编程日记 2023/12/24 19:01:40

二维码初体验 com.google.zxing 实现续 - web api封装

文章目录 一、概述二、最终效果三、源码结构四、完整代码 一、概述 在 二维码初体验 com.google.zxing 实现 我们实现了二维码的生成&#xff0c;但是大部分情况下&#xff0c;二维码的相关功能是作为API接口来提供服务的。 我们下面便演示在springboot、Knife4j下封装api接口…...

编程日记 2023/12/24 18:54:34

Hadoop入门学习笔记——四、MapReduce的框架配置和YARN的部署

视频课程地址&#xff1a;https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接&#xff1a;https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 Hadoop入门学习笔记&#xff08;汇总&#xff09; 目录 四、MapReduce的框架配置和YARN的部署4.1. 配置MapReduce…...

编程日记 2023/12/24 18:48:29

list集合

List集合 List集合的概述 有序集合&#xff08;也称之为序列&#xff09;&#xff0c;用户可以精确的控制列表中的每个元素的插入位置。用户可以通过整数索引访问元素&#xff0c;并搜索列表中的元素 与 Set 集合不同&#xff0c;列表通常允许重复的元素 List 集合的特点 有…...

编程日记 2023/12/24 18:45:25

Vue3学习（后端开发）

目录 一、安装Node.js 二、创建Vue3工程 三、用VSCode打开 四、源代码目录src 五、入门案例——手写src 六、测试案例 七、ref和reactive的区别 一、安装Node.js 下载20.10.0 LTS版本 https://nodejs.org/en 使用node命令检验安装是否成功 node 二、创建Vue3工程 在…...

编程日记 2023/12/24 18:43:23

爬虫字典生成工具，CeWL使用教程

爬虫字典生成工具，CeWL使用教程 1.工具概述2.参数解析3.使用实例1.工具概述 CeWL 是一个 ruby 应用程序，它将给定的 URL 爬到指定的深度，可以选择跟随外部链接，并返回一个单词列表，然后可用于密码破解者 Cewl 是黑客武器库中的强大工具，因为它允许创建有针对性的单词列…...

编程日记 2023/12/24 18:42:22

消息队列之关于如何实现延时队列

一、延时队列的应用 1.1 什么是延时队列&#xff1f; 顾名思义&#xff1a;首先它要具有队列的特性&#xff0c;再给它附加一个延迟消费队列消息的功能&#xff0c;也就是说可以指定队列中的消息在哪个时间点被消费。 延时队列在项目中的应用还是比较多的&#xff0c;尤其像…...

编程日记 2023/12/24 18:37:18

Linux Shell 002-基础知识

Linux Shell 002-基础知识 本节关键字&#xff1a;Linux、Bash Shell、基础知识、Bash特性 相关指令&#xff1a;bash、rm、cp、touch、date 基础知识 什么是Shell脚本 简单概括&#xff1a;将需要执行的命令保存到文本中&#xff0c;按照顺序执行。 准备描述&#xff1a;sh…...

编程日记 2023/12/24 18:36:17

前缀和+单调双队列+贪心：LeetCode2945:找到最大非递减数组的长度

本文涉及知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 单调双队列 贪心 题目 给你一个下标从 0 开始的整数数组 nums 。 你可以执行任意次操作。每次操作中&#xff0c;你需要选择一个 子数组 &#xff0c;并将这个子数组用它所…...

编程日记 2023/12/24 18:32:11

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/31 8:08:07

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/11/22 20:41:02

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2026/1/22 20:46:43

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2026/1/24 13:01:05

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2026/2/3 19:38:38