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

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

news 2026/2/6 12:14:12

生命周期

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

  • 生命周期是，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

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2026/1/12 14:38:19

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2026/1/20 14:36:39

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2026/2/5 3:29:13

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2026/1/31 7:25:57

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2026/2/4 16:21:14

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57