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

生命周期函数、组件

news 文章来源：https://blog.csdn.net/weixin_49555741/article/details/126332019 2024/11/23 10:33:44

1. 生命周期函数 

  1. beforeCreate ： 无法通过 vm 访问data 中的数据、methods 中的方法
  2. created ：可以访问 vm 中的 data 的数据， methods 中的方法
  3. beforeMount：为经 Vue 编译的 dom
  4. mounted：经过 vue 编译的 dom ，对dom 操作有效，可以进行开启定时器、发生网络请求、订阅信息、绑定自定义事件等初始化操作
  5. beforeUpdate：数据是更新的，页面没有更新
  6. updated：数据也页面都是更新的
  7. beforeDestroy：vm 中所有的 data、methods、指令处于可用状态，马上执行销毁过程；一般此状态：关闭定时器、取消订阅信息、解绑自定义事件收尾操作
  8. destroyed：完全销毁一个实例，清除它与其他实例的连接，解绑它的全部指令以及事件监听器

vm. $template 是替换掉根节点

总结：

1. 常用的生命周期函数：

  • mounted：发送ajax 请求，启动定时器、解绑自定义事件、订阅消息等【初始化操作】
  • beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

2. 关于销毁 vue 实例

  • 销毁后借助 vue 开发者工具看不到任何信息
  • 销毁后自定义事件会失效。但是原生的 DOM 事件任然有效
  • 一般不会再 beforeDestroy 操作数据，因为操作数据不会再触发更新流程了

2. 组件化

2.1 理解组件

2.1.1 基础概念

  • 组件的定义：实现应用中局功能代码（css、html、js）和资源（mp3、zip）的集合
  • 模块： 前端的模块就是一个js文件
  • 模块化：一个js 文件里面划分了很多小的js文件（a.js\b.js）
  • 组件化：一个功能一个组件

2.1.2 非单文件组件

  • 定义：一个组件中包含n个组件
  • 不要写el配置项，因为最终的vm都要被一个vm管理，由vm决定服务
  • data ( ) { } : 一定要写成函数形式，不要写对象data： { } 形式；因为避免组件复用，数据存在引用关系
  • template 可以配置组件结构
  • 组件第一个字母最好大写！
<!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>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="root"><!-- 三、编写组件标签 --><girl></girl><hr /><boy></boy></div></body>
<script type="text/javascript">Vue.config.productionTip = false// 一、创建组件1const girl = Vue.extend({// name 是同时改变创建组件和注册组件的名字name: 'peopel'template: `<div><h2>姓名：{{name}} </h2><h2>年龄：{{age}} </h2></div>`,data() {return {name: 'linda',age: 18,}}})// 一、创建组件2const boy = Vue.extend({template: `<div><h2>姓名：{{name}} </h2><h2>年龄：{{age}} </h2></div>`,data() {return {name: 'json',age: 28,}}})// 全局注册组件,所有的root 里面都可以使用组件Vue.component('girl', girl)// 创建vmnew Vue({el: '#root',// 二、注册(局部)组件（组件名：组件 key value形式）components: {// girl: girl,boy: boy,},data: {}})</script></html>
  1.   组件本质是一个VueComponent 的构造函数，是Vue.extend 生成的
  2.  只需要写<School/>, vue 解析时会帮我们创建组件的实例化对象，即执行： new VueComponent（options）
  3. 每次调用Vue.extend ,返回的是一个全新的vueComponent
  4. this 指向：
    （1）组件配置中：data函数、method函数、watch函数、component中的函数、他们的 this            指向均是 VueComponent 实例对象
    （2）new Vue（options）配置中：data 函数、method函数.... this 指向的是Vue 实例对象

  5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

  • 一个重要的内置关系：

  • VueComponent.prototype._proto_===Vue.prototype

  • 结果是让组件实例化对象vc可以访问vue原型的属性和方法

2.1.3 单文件组件

  • 定义：一个组件只包含一个组件（常用）

2.1.4 组件注意点

可以使用name 配置项指定组件在开发者工具中的名字

1. 一个单词组成：

  • 首字母小写：school
  • 首字母大写：School

 2. 多单词组成：

  • keybab-case命名： my-school
  • CamelCase命名：MySchool（需要Vue脚手架支持）

3. 组件标签 

  • <school> </school>
  • <school/> （没有使用vue脚手架组件会不能渲染）

4. 一个注册组件的简写

  • const school = Vue.extend (option)
  • 可简写：const school = option 

相关文章：

生命周期函数、组件

1. 生命周期函数 beforeCreate &#xff1a; 无法通过 vm 访问data 中的数据、methods 中的方法created &#xff1a;可以访问 vm 中的 data 的数据&#xff0c; methods 中的方法beforeMount&#xff1a;为经 Vue 编译的 dommounted&#xff1a;经过 vue 编译的 dom &#x…...

编程日记 2023/2/18 3:20:10

蓝桥杯 stm32 PWM 测量频率

本文代码使用 HAL 库。 文章目录 前言一、PWM 原理图：二、CubeMX 创建工程：三、PWM 单路测频：四、详细代码：1. 获取 CNT函数。2. 设置CNT为 0 函数3. 开启TIM2_CH1的输入捕获中断函数4. TIM 回调函数5. 在 LCD 上显示 R40 和 R39 的频率。总结前言 一、PWM 原理图： 参考…...

编程日记 2023/2/18 3:19:02

Docker CPU 资源控制

01-本章背景知识 在生产环境里运行服务的一个主要问题是如何公平有效的进行资源分配。 1、Docker 容器使用核心操作系统的 Cgroups 管理容器的 CPU资源分配。 2、Docker 容器资源竞争时&#xff0c;默认使用简单均分&#xff08;CFS&#xff09;算法。 3、Docker 容器也可以根…...

编程日记 2023/2/18 3:17:54

小红书数据平台：笔记爆文率提升的三大秘诀公式！

导语 对于小红书商家 / 博主来说&#xff0c;写出爆文就像买彩票&#xff0c;根本不能预知哪一篇会爆。2023年&#xff0c;小红书哪些内容会脱颖而出呢&#xff1f;我们又该如何把握热点趋势&#xff0c;实现优质内容转化出爆文~ 美妆作为小红书的长红赛道&#xff0c;本文我…...

编程日记 2023/2/18 3:16:47

Spring MVC 之Tomcat启动流程

从web.xml说起在开始 Spring MVC 的分析之前&#xff0c;先来聊一聊 Java 初学者接触的最多的 Java Web 基础。还记得我的第一个 Web 工程是由 Servlet、Velocity 和 Filter 来完成的&#xff0c;那时几乎所有人都是根据 Servlet、JSP 和 Filter 来编写自己的第一个 Hello Worl…...

编程日记 2023/2/18 3:15:40

大疆车载更新产品矩阵，覆盖从主动安全到城区领航的全场景

新年智驾供应商的攻势&#xff0c;也像车企一样猛烈。大疆车载近期趁着官网更新&#xff0c;对外公布了梳理后的智驾方案序列&#xff0c;覆盖8大功能产品&#xff1a;主动安全、行车辅助、泊车辅助、记忆泊车、记忆行车、跨层记忆泊车、领航高速、领航城区。需要关注的是&…...

编程日记 2023/2/18 3:14:32

总结Anisble中的任务执行控制并练习

文章目录一、循环1.简单循环2.循环散列或字典列表二、条件三、触发器四、处理失败任务1.ignore_errors2.force_handlers3.changed_when4.failed_when5.block五、 练习建立大小为1500M名为/dev/sdb1的设备利用ansible循环安装且开启vsftpd&#xff0c;apache&#xff0c;dns&…...

编程日记 2023/2/18 3:13:24

PMP好考吗，有多大的价值？

关于PMP考试题型及考试内容&#xff0c;PMP考试共200道单选题&#xff0c;其中25道题不计分&#xff0c;会被随机抽查&#xff0c;答对106道题以上通过考试&#xff0c;参考比例106/175&#xff0c;60.57%估计答对&#xff08;10625&#xff09;道题及上即可通过&#xff0c;参…...

编程日记 2023/2/18 3:12:18

http常用状态码（204，304, 404, 504，502）含义

网络状态码含义&#xff0c;常用&#xff08;204&#xff0c;304, 404, 504&#xff0c;502&#xff09; 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用 常见HTTP状态码大全 1xx&#xff08;临时响应&#xff09; 表示临时响应并需要请求者继…...

编程日记 2023/2/18 3:11:10

记录锁，间隙锁，插入意向锁，临键锁兼容关系

插入意向锁是什么&#xff1f; 注意&#xff01;插入意向锁名字里虽然有意向锁这三个字&#xff0c;但是它并不是意向锁&#xff0c;它属于行级锁&#xff0c;是一种特殊的间隙锁。 在MySQL的官方文档中有以下重要描述&#xff1a; An Insert intention lock is a type of gap…...

编程日记 2023/2/18 3:10:00

map相关接口（map接口、HashMap、LinkedHashMap、TreeMap）

Java知识点总结&#xff1a;想看的可以从这里进入 目录8.3、map结构8.3.1、 map接口8.3.2、HashMap8.3.3、LinkedHashMap8.3.4、TreeMap8.3、map结构 8.3.1、 map接口 map的集合是以键值对的形式存在的 (key-value)&#xff0c;每个键只能对应一个值&#xff0c;通常通过键去…...

编程日记 2023/2/18 3:08:52

抽象工厂模式（Abstract Factory Pattern）

1.抽象工厂模式定义: 抽象工厂模式提供了一个创建一系列相关或者相互依赖对象的接口&#xff0c;无需指定它们具体的类 2.抽象工厂模式适用场景: 客户端(应用层)不依赖于产品类实例如何被创建、实现等细节强调一系列相关的产品对象(属于同一产品族)一起使用创建对象需要大量…...

编程日记 2023/2/18 3:07:45

Linux驱动学习笔记

驱动学习笔记 1、字符设备驱动 Linux 驱动有两种运行方式 第一种就是将驱动编译进 Linux 内核中&#xff0c;这样当 Linux 内核启 动的时候就会自动运行驱动程序。 第二种就是将驱动编译成模块(Linux 下模块扩展名为.ko)&#xff0c;在 Linux 内核启动以后使用“insmod”命…...

编程日记 2023/2/18 3:05:36

tarfile — 访问 Tar 压缩文件

tarfile — 访问 Tar 压缩文件 1.概述 tarfile 模块提供对 Unix tar 存档的读写访问&#xff0c;包括压缩文件。除了 POSIX 标准之外&#xff0c;还支持几种 GNU tar 扩展。还提供处理 Unix 特殊文件类型&#xff0c;如硬链接和软链接&#xff0c;以及设备节点. 虽然 tarfile…...

编程日记 2023/2/18 3:04:29

C++14深度探索之C++基础-共享指针与弱指针使用

shared_ptr : 共享指针 管理多个客户使用的内存，多客户都拥有该内存块， 当共享指针不再拥有该内存时，内存会自动释放， 多用于并发领域，当所有访问该内存的线程都退出时，释放该内存 共享指针可被随意复制，与独占指针相反，独占指针不能被复制 在内存与时间上有一定的开销…...

编程日记 2023/2/18 3:03:20

【React全家桶】reac组件通信

&#x1f39e;️&#x1f39e;️&#x1f39e;️ 博主主页&#xff1a; 糖 &#xff0d;O&#xff0d; &#x1f449;&#x1f449;&#x1f449; react专栏&#xff1a;react全家桶 &#x1f339;&#x1f339;&#x1f339;希望各位博主多多支持&#xff01;&#xff01;&a…...

编程日记 2023/2/18 3:02:11

2023，再转行去做软件测试还有前途吗？

近年来&#xff0c;以云计算、移动互联网、物联网、工业互联网、人工智能、大数据及区块链等新一代信息技术构建的智能化应用和产品出现爆发式增长&#xff0c;突破了传统对于软件形态的认知&#xff0c;软件形态正以各种展现方式诠释着对新型智能软件的定义。这也使得软件的质…...

编程日记 2023/2/18 3:01:05

Java程序API数据接口

API&#xff1a;应用程序接口&#xff08;API&#xff1a;Application Program Interface&#xff09; 一、使用数据接口的作用 1、封装逻辑 数据接口从数据库查询出数据&#xff0c;并组织成json格式&#xff0c;这个逻辑如果在每个终端都写一遍&#xff0c;那样将编写大量…...

编程日记 2023/2/18 2:59:58

剑指offer 7 数组中和为0的三个数

此问题属于nsum问题&#xff0c;题目链接&#xff1a;力扣 要求在数组中找到不重复的三元组&#xff0c;三个数加起来为0&#xff0c;且每个下标只能用一次。而且需要返回所有这样的不重复数组。 1. 排序 双指针 1. 「不重复」的本质是什么&#xff1f;我们保持三重循环的大…...

编程日记 2023/2/18 2:58:52

DockerFile

大家想想&#xff0c;Nginx&#xff0c;tomcat&#xff0c;mysql 这些镜像都是哪里来的&#xff1f;官方能写&#xff0c;我们不能写吗&#xff1f; 我们要研究自己如何做一个镜像&#xff0c;而且我们写的微服务项目以及springboot打包上云部署&#xff0c;Docker就是最方便的…...

编程日记 2023/2/18 2:57:44

Vue-Router 介绍及路由原理分析

文章目录Vue-Router 路由模式单页面与传统页面跳转的区别Hash 模式History 模式abstract 模式原理解析Hash 模式原理History 模式原理路由使用引入 Vue-Router获取全局路由跳转参数的变化获取路由中带的参数重定向页面Vue-Router 路由模式 单页面与传统页面跳转的区别 单页面…...

编程日记 2023/2/18 2:55:35

git代码提交后jenkins构建和自动部署

利用jenkins和gitlab的webhook结合&#xff0c;实现提交代码之后&#xff0c;自动触发jenkins的构建。顺带介绍一下通过触发器构建&#xff0c;比如直接通过url去触发的方式。 一、jenkins结合webhook 1、jenkins配置 a、首先jenkins得需要安装两个gitlab的插件&#xff1a;(…...

编程日记 2023/2/18 2:54:28

2023面试题目总结

项目遇到的问题难点&#xff1f; 老项目版本过低(angular4),相关框架太少&#xff0c;需要升级成新框架。 1.single-spa 2.qiankun 3.iframe 样式环境隔离/js隔离/公共依赖的加载 JS 原型&#xff0c;原型链&#xff0c;new 原型是存放公共属性地方&#xff0c;所有实例都…...

编程日记 2023/2/18 2:53:21

Vue常用指令及声明周期

文章目录知识点前端开发环境配置v-text && v-htmlv-if、v-else && v-showv-forv-onv-modelv-bind、v-cloak、v-pre&&v-once全局 API 是什么Vue.directive 自定义组件Vue.directive 是什么自定义组件回调函数参数自定义组件的生命周期Vue.set 全局操作为…...

编程日记 2023/2/18 2:52:15

MariaDB 成功敲钟上市 | 它与 Navciat 缘起 10 年前

MariaDB 敲钟上市2022 年底&#xff0c;云数据库公司 MariaDB 与 Angel Pond Holdings 公司完成合并&#xff0c;并在纽交所上市。新公司更名为 MariaDB&#xff0c;MySQL 之父奋斗了13年终敲钟。这标志着 MariaDB 开启新篇章。无论从开源还是商业之路&#xff0c;都将成为业内…...

编程日记 2023/2/18 2:51:08

LESS模型与随机森林

模型学习 1 随机森林 https://blog.csdn.net/weixin_35770067/article/details/107346591? 森林就是建立了很多决策树&#xff0c;把很多决策树组合到一起就是森林。 这些决策树都是为了解决同一任务建立的&#xff0c;最终的目标也都是一致的&#xff0c;最后将其结果来平均…...

编程日记 2023/2/18 2:50:00

如何利用Power Virtual Agents机器人实现成绩查询服务

今天我们继续介绍如何利用Power Virtual Agents来实现成绩查询服务。设计思路是在PVA聊天机器人的对话框中输入学生的姓名和学号来进行成绩的查询。首先&#xff0c;在Microsoft 365的OneDrive中制作一个Excel格式的成绩单。 可以将学生的学号、姓名、各学科成绩进行添加。 在P…...

编程日记 2023/2/18 2:48:55

flavor 配置

文章目录1. flavorDimensions1.1 单维度1.2 多维度2. BuildConfig3. sourceSets4. 参考资料1. flavorDimensions 与 productFlavors 配合使用使用 flavorDimensions 定义风味维度&#xff0c;维度越多&#xff0c;能打出的渠道包越丰富 1.1 单维度 defaultConfig {...flavor…...

编程日记 2023/2/18 2:47:48

《第一行代码》 第五章：详解广播机制

如果你了解网络通信原理应该会知道&#xff0c;在一个 IP 网络范围中最大的IP 地址是被保留作为广播地址来使用的。比如某个网络的 IP 范围是 192.168.0XXX&#xff0c;子网掩码是255.255.255.0那么这个网络的广播地址就是 192.168.0255广播数据包会被发送到同-网络上的所有端口…...

编程日记 2023/2/18 2:46:40

Leetcode(每日一题)——1139. 最大的以 1 为边界的正方形

摘要 1139. 最大的以 1 为边界的正方形 一、以1为边界的最大正方形 1.1 动态规划 第530题需要正方形所有网格中的数字都是1&#xff0c;只要搞懂动态规划的原理&#xff0c;代码就非常简洁。而这题只要正方形4条边的网格都是1即可&#xff0c;中间是什么数字不用管。 这题…...

编程日记 2023/2/18 2:45:34

境外网站 备案/留号码的广告网站不需要验证码

经常修改主题&#xff0c;因为缓存的缘故&#xff0c;难免遇上需要访客浏览器强制刷新的情况。但是尽量增加客户端css&#xff0c;js&#xff0c;图片缓存时间是提高站点访问速度的一个关键因素&#xff0c;为解决这个矛盾&#xff0c;常见的方法是在css和js后面跟上一段时间戳…...

编程日记 2024/11/23 8:52:15

佛山企业网站建设教程/广告推广方案

挂断原理参考&#xff1a;https://www.ibm.com/developerworks/cn/linux/l-cn-screen/ 要求&#xff0c;python2 常用操作&#xff1a; 创建screen screen -L -S yourname -L 代表在当前目录生成log文件记录屏幕的输出。&#xff08;当在工作目录打开多个screen时&#xff0c;p…...

编程日记 2024/11/23 7:22:29

郑州做网站msgg/营销培训视频课程免费

作为软件测试工程师&#xff0c;你应该要分清楚QPS和TPS的区别。QPS/TPSQPS(Queries Per Second)&#xff1a;每秒查询率&#xff0c;是一台服务器每秒能够响应的查询次数&#xff0c;是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准。TPS(TransactionsPerSecon…...

编程日记 2024/11/23 7:08:44

大同网站建设熊掌号/百度的营销方式有哪些

1 注意 滚动条数需要大于 div 的高度 才能滚动 height: 300px; overflow: hidden; 2 如果是ajax取后台数据 &#xff0c;需要 设置 async: false, 同步执行&#xff0c; 3 ajax 完后 加入 $("#marquee4").kxbdMarquee({ direction: "up", isEqual: fa…...

编程日记 2024/11/23 1:23:37

seo优化网站建设哪家好/廊坊seo排名

访问DVWA时&#xff0c;页面无法显示&#xff0c;出现错误提示&#xff0c;如下所示&#xff1a; DVWA System error - config file not found. Copy config/config.inc.php.dist to config/config.inc.php and configure to your environment. 中文大意为&#xff1a;DVWA系统…...

编程日记 2024/11/22 20:58:59

网站开发用什么写/我有广告位怎么找客户

今天主要给大家带来一个小型公司的网络搭建&#xff0c;保证每一台计算机都可以访问www.ntd1711.com。 实验名称&#xff1a;小型公司网络的搭建 实验拓扑&#xff1a;实验目的&#xff1a;确保每个终端可以访问www.ntd1711.com&#xff08;192.168.30.88&#xff09;地址规划&…...

编程日记 2024/11/22 19:37:34