VUE实例的组件的生命周期和数据共享和ref的使用方法(建议直接看ref)

news2024/11/15 10:00:09

目录

  • VUE实例的组件的生命周期和数据共享
  • 组件间的数据共享
  • ref的使用方法
    • 使用ref操作dom
    • 使用ref引用组件
      • this.$nextTick(cb)方法的使用

VUE实例的组件的生命周期和数据共享

生命周期和生命周期函数
这个是我学校vue书籍阿里云盘地址,有需要可以点击看看

生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。
生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。
注意:生命周期强调的是时间段,生命周期函数强调的是时间点。
在这里插入图片描述

可以参考vue官方文档给出的“生命周期图示”,进一步理解组件生命周期执行的过程:https://cn.vuejs.org/v2/guide/instance.html生命周期图示
下面是官网粘贴过来的图示,在这里做了一些笔记,可以更直观了解创建过程
在这里插入图片描述

组件间的数据共享

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

ref的使用方法

使用ref操作dom

在这里插入图片描述

使用ref引用组件

看到这的时候,前面共享数据就可以放弃了,因为这个引用组件就可以包含所有的组件数据,直接可以拿来共享使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
但是上面这一步会报错undefined,原因是页面更新为输入框显示时,为beforeupdate生命周期阶段,此时页面元素还未渲染,在这里是拿不到标签元素的,具体解决方法参考下一页

this.$nextTick(cb)方法的使用

使用场景:当某些代码需要延迟到dom重新渲染以后再去执行时可以使用

在这里插入图片描述

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

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

相关文章

对Java中异常的认识

文章目录一、异常的概念与体系结构1.异常的概念2.异常的体系结构3.异常的分类二、异常的处理1.防御式编程2. 异常的抛出3.异常的捕获4.异常处理流程总结三、自定义异常类一、异常的概念与体系结构 1.异常的概念 在生活中,当我们发现朋友表现出不舒服的情况&#x…

LabVIEW ​​单​进程​共享​变量​与​​全局​变量

LabVIEW ​​单​进程​共享​变量​与​​全局​变量 单​进程​共享​变量​与​LabVIEW​全局​变量​相似。​事实​上,​单​进程​共享​变量​的​实现​是在​LabVIEW​全局​变量​的​基础​上​增加​了​时间​标识​功能。 ​为了​比较​单​进程​…

《终身成长》读书笔记

文章目录书籍信息思维模式思维模式解析关于能力和成就的真相体育:冠军的思维模式商业:思维模式和领导力人际关系:关于相处的思维模式父母、老师与教练:思维模式的传播改变思维模式书籍信息 书名:《终身成长》 作者&am…

Java算法_LeetCode26:删除排序数组中的重复项

LeetCode26:删除排序数组中的重复项 给你一个 升序排列 的数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。 由于在某些语言中不能改变数组的长度&a…

设计模式-责任链模式之**动态配置责任链**

正在参加2022年度博客之星评选,大家帮我点个五星好评。有投必会 责任链的优势劣势我就不说,百度上很多。 1、怎么:动态配置责任链 通过配置文件yml来指定你的责任链的执行顺序。 地址 配置文件如何配置,怎么读取 为什么&#x…

HTTP协议详解 - 通过C++实现HTTP服务剖析HTTP协议

前言 C/C程序员一般很少会接触到HTTP服务端的东西,所以对HTTP的理解一般停留在理论。 本文章实现通过C实现了一个http服务,可以通过代码对HTTP协议有更深的理解,并且通过抓包工具对HTTP协议进行更为详细的分析。 HTTP协议简介 HTTP(hypert…

Linux--多线程

目录1. 什么是线程2. 创建线程3. 线程等待3.1 pthread_join函数3.2 线程分离3.2 线程终止的方案4. 线程ID1. 什么是线程 Linux中没有专门为线程设计TCB,而是用进程的PCB来模拟进程。 这也是为什么有种观点会说Linux下没有真正意义上的线程。 对于线程来说&#xf…

Elasticsearch搜索引擎(二)——SpringData Elasticsearch

SpringData Elasticsearch SpringData介绍 Spring Data是一个用于简化数据库访问,并支持云服务的开源框架。其主要目标是使得对数据的访问变得方便快捷,并支持map-reduce框架和云计算数据服务。 Spring Data可以极大的简化JPA的写法,可以在…

CSND近期推出的猿如意到底怎么样?

CSND近期推出的猿如意到底怎么样? 投稿测评正文 猿如意传送门 猿如意下载地址:猿如意-程序员的如意兵器,工具代码,一搜就有 猿如意使用了几次了,今天来想分享一下我对于猿如意的使用感受吧!! 先说结论&#xff1a…

吴恩达《机器学习》——Logistics回归代码实现

Logisitc回归1. Sigmoid与二分类Sigmoid函数为什么Sigmoid函数可以表示二分类概率?2. Logistics回归交叉熵损失函数梯度过拟合与欠拟合正则化3. Python代码实现4. 单维与多维Logistic分类单维数据分类多维数据分类数据集、源文件可以在Github项目中获得 链接: https…

04 kafka 中一些常用的配置的使用

前言 呵呵 也是最近有一些 搭建 kafka 的环境的需求 然后 从新看了一下 一部分的配置情况, 这里 大致理一下 一些我这里比较关心的配置 那些配置关联了 kafka 服务器绑定服务 绑定 tcp 服务的配置来自于这里, 读取的是 config.dataPlaneListeners config.dataPlaneListen…

Java母婴商城母婴店孕妇商城婴幼儿商城网站系统源码

简介 java使用ssm开发的母婴商城系统,用户可以注册浏览商品,加入购物车或者直接下单购买,在个人中心管理收货地址和订单,管理员也就是商家登录后台可以发布商品,上下架商品,处理待发货订单等。 演示视频&…

Allegro如何在PCB上查看pin number的三种方法操作指导

Allegro如何在PCB上查看pin number的三种方法操作指导 Allegro支持快捷的在PCB上查看pin number,如下图 具体操作如下 方法一:show element 选择Show Element命令Find选择Pins

2022年学习机器人和人工智能的一些期待

2022年学习机器人和人工智能的一些体会 2023年即将到来,满满的期待。 做好规划是非常非常重要的,有时候甚至比认真做事本身更为重要。 《礼记中庸》:“凡事豫则立,不豫则废。言前定则不跲,事前定则不困,行…

视频解码学习备忘

媒体文件知识 日常都是播放器直接播,其实这里面还有不少内容的。 首先是视频容器,就是所谓的.mp4 .mkv 这类文件,其目的主要就是用来存放音频视频字幕等内容,所以叫做容器。这些都有一定规范,比如mp4,叫ISO 14496-12…

流程图+BPMN+脑图 JointJS++ 3.6.3 Crack

一个库,‍ 无限的UI选择,直接在您的应用程序中享受交互式流程图、BPMN 和其他图表工作室。利用我们的模板化应用程序,将开发时间缩短至几天。 经过十多年和数百万行代码的编写,我们推出了一组随时可用的功能,以帮助您创…

数据结构进阶 二叉树OJ题二

作者:小萌新 专栏:数据结构进阶 作者简介:大二学生 希望能和大家一起进步! 本篇博客简介:介绍几道二叉树的oj题 题目一 二叉搜索树与双向链表 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表…

帆软—图表专题

饼图 优点:能很直观的看到每一个部分在整体中所占的比例。 缺点:不适合较大的数据集(分类)展现,数据项中不能有负值,当比例接近时,人眼很难准确判别。 变形饼图 柱形图 特点 优点&#xff…

SpringBoot HandlerMethodArgumentResolver接口自定义参数解析器

参考资料 【SpringBoot】HandlerMethodArgumentResolver的简单使用HandlerMethodArgumentResolver(参数解析器)的作用使用小案例HandlerMethodArgumentResolver用于统一获取当前登录用户 目录一. 需求二. 前期准备三. 实现HandlerMethodArgumentResolver接口四. 将自定义的方法…

一套javassf门户网站管理系统源码分享

淘源码:国内专业的免费源码下载平台 JAVA SSF项目框架源码 后台管理系统源码 一套以SpringMVCSpringHibernateFreemarkerShiroLuceneHtml5jQuery为技术核心架构的门户网站管理系统源码。 源码免费分享,需要源码学习可私信我。 主要功能: 内…