Vue组件:模板引用ref属性的使用

 Vue 组件系列文章:

《Vue组件:创建组件、注册组件、使用组件》

《Vue组件:使用Prop实现父组件向子组件传递数据》

《Vue组件:使用$emit()方法监听子组件事件》

《Vue组件:插槽》

《Vue组件:混入》

《Vue组件:动态组件、缓存组件、异步组件》

《Vue组件:依赖注入provide和inject的使用》

《Vue组件:模板引用ref属性的使用》 

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作,但在某些情况下,我们仍然需要直接访问底层 DOM 元素。要实现这一点,我们可以使用特殊的 ref 属性。

<template><!-- 第一步:给 DOM 元素,添加 ref 属性 -->搜索:<input ref="search" type="text" />
</template>

挂载结束后引用都会被加载在 this.$refs 之上。

<template><!-- 第一步:给 DOM 元素,添加 ref 属性 -->搜索:<input ref="search" type="text" />
</template><script>
export default {mounted() {//第二步:使用 this.$refs 获取 DOM 元素输入框,并让输入框自动获取焦点this.$refs.search.focus();}
}
</script>

【实例】使用 ref 获取 DOM 元素并赋值。

<template><fieldset><legend>组件</legend><!-- 第一步:给 DOM 元素,添加 ref 属性 --><h3 ref="title">标题名称</h3><p>博客信息:<input ref="blogName" type="text" /></p><p>博客地址:<input ref="blogUrl" type="text" /></p></fieldset>
</template><script>
export default {//说明:mounted()生命周期钩子,在 DOM 文档渲染完毕之后进行调用。mounted() {//第二步:使用 this.$refs 获取 DOM 元素,并赋值内容this.$refs.title.innerHTML = '使用 ref 获取 DOM 元素';this.$refs.blogName.value = '您好,欢迎访问 pan_junbiao的博客';this.$refs.blogUrl.value = 'https://blog.csdn.net/pan_junbiao';}
}
</script><style scoped>
input {width: 300px;padding: 3px;font-size: 16px;
}
</style>

执行结果:

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

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

相关文章

无头服务(Headless Service)

无头服务 ​ 无头服务&#xff08;Headless Service&#xff09;是 Kubernetes 中的一种特殊服务类型&#xff0c;主要用于提供稳定的网络标识&#xff0c;而不需要通过负载均衡来分配流量。它允许直接访问 Pod&#xff0c;而不经过集群内的负载均衡器&#xff0c;并且通常用于…

Redis常用操作及springboot整合redis

1. Redis和Mysql的区别 数据模型&#xff1a;二者都是数据库,但是不同的是mysql是进行存储到磁盘当中,而Redis是进行存储到内存中. 数据模型 : mysql的存储的形式是二维表而Redis是通过key-value键值对的形式进行存储数据. 实际的应用的场景: Redis适合于需要快速读写的场景&…

FreeRTOS学习笔记(二)任务基础篇

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、 任务的基本内容1.1 任务的基本特点1.2 任务的状态1.3 任务控制块——任务的“身份证” 二、 任务的实现2.1 定义任务函数2.2 创建任务2.3 启动任务调度器2…

python安装包的三种区别

python安装包的三种区别&#xff1a; Download Windows x86 web-based installer Download Windows x86 executable installerDownload Windows x86 embeddable zip fileDownload Windows x86-64 web-based installerDownload Windows x86-64 executable installerDownload W…

使用mingw64 编译 QT开发流程

1. 安装QT5 QT5.12.12 安装时选择mingw的开发包 2. 使用qtdesigner 进行ui设计 生成ui文件 3. 将ui文件转换为.h 文件 uic mywindow.ui -o ui_mywindow.h代码中指向生成的 UI 对象的地方 要改成这个Form 4. 编译 创建mainwindow.cpp #include "mainwindow.h"…

Python Flask_APScheduler定时任务的正确(最佳)使用

描述 APScheduler基于Quartz的一个Python定时任务框架&#xff0c;实现了Quartz的所有功能。最近使用Flask框架使用Flask_APScheduler来做定时任务&#xff0c;在使用过程当中也遇到很多问题&#xff0c;例如在定时任务调用的方法中需要用到flask的app.app_context()时&#…

绍兴视角下的广州温暖:星贝育园——自闭症儿童的关怀之家

在绍兴这座充满人文情怀的城市里&#xff0c;人们对自闭症儿童的关注与关怀如同涓涓细流&#xff0c;汇聚成爱的海洋。当谈及为这些特殊孩子寻找一个温馨、专业的成长环境时&#xff0c;广州的星贝育园自闭症儿童寄宿制学校无疑是众多家庭心中的理想之选。这所学校以其独特的关…

代码随想录Day 42|leetcode题目:188.买卖股票的最佳时机IV、309.最佳买卖股票时机含冷冻期、714.买卖股票的最佳时机含手续费

提示&#xff1a;DDU&#xff0c;供自己复习使用。欢迎大家前来讨论~ 文章目录 题目题目一&#xff1a;188.买卖股票的最佳时机IV解题思路&#xff1a; 题目二&#xff1a;309.最佳买卖股票时机含冷冻期解题思路&#xff1a; 题目三&#xff1a; 714.买卖股票的最佳时机含手续…

摊牌了!一文教会你轻松上手豆包MarsCode 编程助手!

豆包MarsCode 编程助手是豆包旗下的 AI 编程助手&#xff0c;提供以智能代码补全为代表的 AI 功能。豆包MarsCode 编程助手支持主流的编程语言和 IDE&#xff0c;在开发过程中提供单行代码或整个函数的编写建议。此外&#xff0c;它还支持代码解释、单测生成和问题修复等功能&a…

有关采用parallelStream并行流处理List并使用自定义线程池和lettuce redis客户端一起使用的问题

在使用parallelStream进行处理list时&#xff0c;如不指定线程池&#xff0c;默认的并行度采用cpu核数进行并行&#xff0c;这里采用ForJoinPool来指定线程池&#xff0c;但循环中使用了luttuce 来获取redis的key时&#xff0c;出现没有控制住线程池的线程数问题。具体上代码。…

SAP B1 学习笔记 - 易混淆字段名(持续更新中)

背景 在 SAP B1 的单据中&#xff0c;由于同一单据时常对应着多个后台表单&#xff0c;且后台表单内包含的字段信息往往远大于单据显示出来的&#xff0c;在配置时经常出现多个字段混淆、无系统信息提示字段名模糊的情况&#xff0c;这里总结常见的易混淆难查找的后台字段名。…

AIGC6: 走进腾讯数字盛会

图中是一个程序员&#xff0c;去参加一个技术盛会。AI大潮下&#xff0c;五颜六色&#xff0c;各种不确定。 背景 AI对各行各业的冲击越来越大&#xff0c;身处职场的我也能清晰的感受到。 我所在的行业为全球客服外包行业。 业务模式为&#xff1a; 为国际跨境公司提供不同…

使用C++编写一个语音播报时钟(Qt)

要求&#xff1a;当系统时间达到输入的时间时&#xff0c;语音播报对话框中的内容。定时可以取消。qt界面如上图所示。组件如下&#xff1a; countdownEdit作为书写目标时间的line_edit start_btn作为开始和停止的按钮 stop_btn作为取消的按钮 systimelab显示系统时间的lab tex…

Java后端程序员简单操作Linux系统命令

Linux系统概述 Linux 内核最初是由芬兰人林纳斯托瓦兹&#xff08;Linus Torvalds&#xff09;在赫尔辛基大学上 学时而编写的一个开源的操作系统。 Linux&#xff08;管理计算机硬件资源&#xff0c;任务调度&#xff09;支持多用户&#xff0c;支持网络&#xff0c;支持多线…

Vue3:el-table实现日期的格式化

后端如果返回的是时间戳&#xff0c;需要我们进行日期格式化 例如&#xff1a;2024-09-11T14:19:14 定义一个日期解析的工具组件 export function formatDateAsYYYYMMDDHHMMSS(dateStr: any) {const date new Date(dateStr);const year date.getFullYear();const month S…

踩最深的坑,教会自己找到需求

目录 引言 1. 寻找合适的需求 2. 海外市场选择 3. 线下热点判断 4. 线上关注度分析 5. 当前竞争分析 6. 未来潜力分析 引言 在经历了刻骨铭心的合伙创业经历后&#xff0c;我意识到是时候该独立出海了。 捡起早已深埋在心里的创业想法&#xff0c;开始独自创业。 这次…

[笔记] 电机工作制以及软硬特性的本质推导

原始资料来源&#xff1a;某电机厂商 1.电机非常规操作术语和许可次数 1.1 电机操作术语 点动&#xff1a;通电后立即关停&#xff0c;最终速度不到额定转速的1/4电制动&#xff1a;制动到额定转速的1/3逆转&#xff1a;也就是打反车&#xff0c;不等停车&#xff0c;立即翻…

stm32之硬件SPI读写W25Q64存储器应用案例

系列文章目录 1. stm32之SPI通信协议 2. stm32之软件SPI读写W25Q64存储器应用案例 3. stm32之SPI通信外设 文章目录 系列文章目录前言一、电路接线图二、应用案例代码三、应用案例代码分析3.1 基本思路3.2 相关库函数介绍3.3 MySPI模块3.3.1 模块初始化3.3.2 SPI基本时序单元模…

01_Python基本语法

Hello Python 与其他编程一样&#xff0c;第一个程序都是输出Hello World!。 print("Hello World!")print() 函数由两部分构成 &#xff1a; 指令&#xff1a;print指令的执行对象&#xff0c;在 print 后面的括号里的内容 Hello World!。 Python程序的执行流程如…

机器学习中最常见的50个问题(进阶篇)

机器学习中最常见的50个问题 进阶篇 1.解释SVM的工作原理。 SVM&#xff0c;全称支持向量机&#xff08;Support Vector Machine&#xff09;&#xff0c;是一种有监督学习算法&#xff0c;主要用于解决数据挖掘或模式识别领域中的数据分类问题。 SVM的工作原理是建立一个最…