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

生命周期

关于VueComponent

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

  • 生命周期是,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都以模块化编写时,这个应用为模块化应用。当应用中的功能都是多组件方式编写。这个应用就是组件化的应用

  • 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>

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

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

相关文章

vue前端开发中,通过配置,实现多个入口文件的方法

由于vue为单页面项目&#xff0c;通过控制组件局部渲染&#xff0c;main.js是整个项目唯一的入口&#xff0c;整个项目都在一个index.html外壳中。 若项目过大&#xff0c;会造成单页面负载过重&#xff1b;同时&#xff0c;多页面利于模块独立部署。 要单独将页面当成一个项…

react 18 Hooks扩展函数式组件的状态管理

React函数式组件 特点 React函数式组件具有以下特点&#xff1a; 简洁&#xff1a;使用函数的方式定义组件&#xff0c;语法简单直观。无状态&#xff1a;函数式组件没有内部状态&#xff08;state&#xff09;&#xff0c;只依赖于传入的props。可复用&#xff1a;函数式组…

influxdb-cluster集群部署

一.部署环境 * InfluxDB集群节点数&#xff1a;mate服务至少3个节点&#xff0c;节点数越多&#xff0c;集群性能越高。 * 操作系统&#xff1a;支持的操作系统包括Linux、Windows和MacOS。 * CPU&#xff1a;至少2核4线程&#xff0c;主频越高越好。 * 内存&#xff1a;至少8…

基于SSM的大学生兼职平台的设计与实现

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SSM的大学生兼职平台的设计与实现,j…

新疆某职业技术学院,实现对上千台IT设备的集中监控和管理

随着信息化时代的快速发展&#xff0c;IT技术已经成为教育领域不可或缺的一部分。新疆某职业技术学院为了更好地支持教学和科研工作&#xff0c;决定引入监控易管理平台7.0&#xff0c;实现对上千台IT设备的监控管理。通过引入该平台&#xff0c;职业技术学院的IT运维效率和质量…

【已解决】Redis序列化反序列化不一致 - String类型值多了双引号问题

在项目中使用spring 的RedisTemplate从redis中获取数据的时候&#xff0c;发现字符串的value多了双引号。如下图所示&#xff1a; 产生的原因可以分一下几个方面&#xff1a; 一、采用的序列化对象不同 多服务之间调用时候&#xff0c;序列化服务A(向redis中写数据的)和反序…

【翼韵】数据上传沟通、决策、试错

韵达德邦来说说&#xff0c;翼达、翼韵、翼德、翼邦的小记录 翼达同学&#xff1a;沟通成本好大&#xff01; 翼韵同学&#xff1a;决策成本很大&#xff01; 翼德同学&#xff1a;试错成本更大&#xff01; 翼邦同学&#xff1a;你们加起最大&#xff01; QY成本沟通成本33%决…

Win7如何修改MAC地址

MAC地址&#xff0c;又叫做物理地址、硬件地址&#xff0c;是用来定义网络设备的位置&#xff0c;一般情况下&#xff0c;MAC地址在网卡中是固定的&#xff0c;但不排除有人手动去修改自己的MAC地址。win7如何修改MAC地址?其实修改MAC地址的方法很简单&#xff0c;可以通过硬件…

K8s出现问题时,如何排查解决!

K8s问题的排查 1. POD启动异常、部分节点无法启动pod2. 审视集群状态3. 追踪事件日志4. 聚焦Pod状态5. 检查网络连通性6. 审视存储配置7. 研究容器日志8. K8S集群网络通信9. 问题&#xff1a;Service 是否通过 DNS 工作&#xff1f;10. 总结1、POD启动异常、部分节点无法启动p…

普通Java项目打包可执行Jar

普通Java项目打包 IDEA配置 在项目配置中选择 Artifacts -> JAR -> From modules with dependencies 选择项目模块&#xff0c;程序主类、依赖引入方式、清单文件位置 确认Jar名称和Jar输出目录 通过 Build -> Build Artifact -> Build 打包Jar文件 Java打包可执…

JavaWeb笔记之SVN

一、版本控制 软件开发过程中 变更的管理&#xff1b; 每天的新内容;需要记录一下&#xff1b; 版本分支;整合到一起&#xff1b; 主要的功能对于文件变更的追踪&#xff1b; 多人协同开发的情况下,更好的管理我们的软件。 大型的项目;一个团队来进行开发; 1: 代码的整合 2: 代…

Kubernetes 100个常用命令!

这篇文章是关于使用 Kubectl 进行 Kubernetes 诊断的指南。 列出了 100 个 Kubectl 命令&#xff0c;这些命令对于诊断 Kubernetes 集群中的问题非常有用。这些问题包括但不限于&#xff1a; • 集群信息 • Pod 诊断 • 服务诊断 • 部署诊断 • 网络诊断 • 持久卷和持久…

2023-强网杯-【强网先锋-ez_fmt】

文章目录 ez_fmt libc-2.31.so检查main思路exp 参考链接 ez_fmt libc-2.31.so 检查 没有地址随机化 main 简单粗暴的printf格式化字符串漏洞 思路 泄露地址&#xff0c;覆盖返回地址形成ROP链 printf执行时栈上存在__libc_start_main243的指令的地址&#xff0c;可以泄露…

JAVA面试题17

Java中的日 12-21 15:09 继续 志&#xff08;Logging&#xff09;是什么&#xff1f; 它有什么作用&#xff1f; 答案&#xff1a;日志是程序运行过程中产生的记录和反映&#xff0c;用于帮助程序员理解程序的运行情况和问题。Java中的日志机制可以通过Java标准库自带的java.u…

C++哈希表的实现

C哈希表的实现 一.unordered系列容器的介绍二.哈希介绍1.哈希概念2.哈希函数的常见设计3.哈希冲突4.哈希函数的设计原则 三.解决哈希冲突1.闭散列(开放定址法)1.线性探测1.动图演示2.注意事项3.代码的注意事项4.代码实现 2.开散列(哈希桶,拉链法)1.概念2.动图演示3.增容问题1.拉…

MyBatis 架构分析

文章目录 三层架构一、基础支撑层1.1 类型转换模块1.2 日志模块1.3 反射工具模块1.4 Binding 模块1.5 数据源模块1.6 缓存模块1.6 解析器模块1.7 事务管理模块 二、核心处理层2.1 配置解析2.2 SQL 解析与 scripting 模块。2.3 MyBatis 中的 scripting 模块就是负责动态生成 SQL…

SpringCloud Alibaba(itheima)

SpringCloud Alibaba 第一章 微服务介绍1.1系统架构演变1.1.1单体应用架构1.1.2垂直应用架构1.1.3分布式架构1.1.4 SOA架构1.1.5微服务架构 1.2微服务架构介绍1.2.1微服务架构的常见问题1.2.2微服务架构的常见概念1.2.3微服务架构的常见解决方案 1.3 SpringCloud Alibaba介绍1.…

用23种设计模式打造一个cocos creator的游戏框架----(二十二)原型模式

1、模式标准 模式名称&#xff1a;原型模式 模式分类&#xff1a;创建型 模式意图&#xff1a;用原型实例指定创建对象的种类&#xff0c;并且通过复制这些原型创建新的对象 结构图&#xff1a; 适用于&#xff1a; 1、当一个系统应该独立于它的产品创建、构成和表示时 2、…

对接第三放数据字段不一致问题:注解映射@JsonProperty 与 @JSONField

我在对接第三方数据的时候&#xff0c;遇到本地实体类 与 对接数据的 json 字段不匹配的时候&#xff0c; 采用注解的方式映射 json 数据到 对应的 java 实体类 Excel(name "舒张压")JsonProperty(value "hypotension")private BigDecimal pressureL…

BUUCTF-Crypto合集-WP

获取CTF工具可关注CSJH网络安全团队&#xff0c;回复CTF工具 一眼就解密 下面的字符串解密后便能获得flag&#xff1a;ZmxhZ3tUSEVfRkxBR19PRl9USElTX1NUUklOR30 注意&#xff1a;得到的 flag 请包上 flag{} 提交 大小写字母加数字&#xff0c;而且等于号结尾&#xff0c;bas…