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>
执行结果:

相关文章:
Vue组件:模板引用ref属性的使用
Vue 组件系列文章: 《Vue组件:创建组件、注册组件、使用组件》 《Vue组件:使用Prop实现父组件向子组件传递数据》 《Vue组件:使用$emit()方法监听子组件事件》 《Vue组件:插槽》 《Vue组件:混入》 《Vue组件…...
robomimic基础教程(一)——基本概念
robosuite和robomimic都是由ARISE Initiative开发的开源工具,旨在推进机器人学习和机器人操作领域的研究。 一、基本概念 robomimic是一个用于机器人示范学习的框架。它提供了在机器人操作领域收集的大量示范数据集,以及用于从这些数据集中学习的离线学…...
7天速成前端 ------学习日志 (继苍穹外卖之后)
前端速成计划总结: 全26h课程,包含html,css,js,vue3,预计7天内学完。 起始日期:9.16 预计截止:9.22 每日更新,学完为止。 学前计划 课…...
讲课研判:基于教师上课视频文件的综合分析
在教育评估与改进的过程中,对教师上课视频文件进行详尽的研判是一项至关重要的工作。它不仅能够帮助教师自我反思、提升教学质量,还能为教育管理者提供决策依据,促进教育教学的整体优化。本文将从教学目标、教学内容、教学效果、教学能力、教…...
mac 如何开启指定端口供外部访问?
前言 需要 mac 上开放指定端口,指定 ip 访问 解决 在 macOS 上开放一个端口,并指定只能特定的 IP 访问,可以使用 macOS 内置的 pfctl(Packet Filter)工具来实现。 1、 编辑 pf 配置文件: 打开 /etc/pf.conf 文件进行编辑。 可以使…...
Weblogic部署
要安装weblogic,首先要有java环境,因此需要先安装jdk。 这里需要注意,weblogic版本不同,对应的jdk版本也不同,我在这里就踩了很多坑,我这里下载的是fmw_12.2.1.4.0_wls_lite_generic.jar对应的是jdk-8u333…...
面向对象设计的五大原则(SOLID 原则)
面向对象设计的五大原则(SOLID 原则)是指导我们设计可维护、灵活且易扩展的面向对象系统的核心准则。这些原则帮助开发者避免常见的设计陷阱,使代码更具可读性和可维护性。 0.设计原则和设计模式的关系 设计原则(Design Princip…...
Python和MATLAB及C++信噪比导图(算法模型)
🎯要点 视频图像修复模数转换中混合信号链噪音测量频谱计算和量化周期性视觉刺激脑电图高斯噪声的矩形脉冲 总谐波失真 周期图功率谱密度各种心率失常检测算法胶体悬浮液跟踪检测计算交通监控摄像头图像噪音计算 Python信噪比 信噪比是科学和工程中使用的一种测…...
App及web反编译方案
APP反编译代码的工具下载: 下载地址:APK逆向三件套apktool-2.9.3.jar,dex2jar-2.0.zip,jd-gui-windows-1.6.6资源-CSDN文库 》dex2jar: 把dex文件转成jar文件 》 jd-gui: 这个工具用于将jar文件转换成java代码 》APKTool: 首先把…...
学成在线练习(HTML+CSS)
准备工作 项目目录 内部包含当前网站的所有素材,包含 HTML、CSS、图片、JavaScript等等 1.由于元素具有一些默认样式,可能是我们写网页过程中根本不需要的,所有我们可以在写代码之前就将其清除 base.css /* 基础公共样式:清除…...
istio中使用serviceentry结合egressgateway实现多版本路由
假设有一个外部服务,外部服务ip为:10.10.102.90,其中32033为v1版本,32034为v2版本。 现在需要把这个服务引入到istio中,使用egressgateway转发访问该服务的流量,并且需要实现多版本路由,使得he…...
Java项目——苍穹外卖(二)
Redis 简介 Redis是一个基于内存的key-value结构数据库 基于内存存储,读写性能高适合存储热点数据(热点商品、资讯、新闻)企业应用广泛 基础操作 启动 在redis安装目录中打开cmd,输入如上图指令即可启动,按下crtl…...
【Python日志功能】三.日志记录方法与多模块日志
文章目录 相关链接第三篇:日志记录方法与多模块日志1 基本日志记录方法2 在多个模块中使用日志3 文章总结 相关链接 【Python日志功能】一.日志基础与基本配置【Python日志功能】二.高级配置与日志处理器【Python日志功能】三.日志记录方法与多模块日志官方文档&am…...
在pycharm终端中运行pip命令安装模块时,出现了“你要如何打开这个文件”弹出窗口,是什么状况?
这种情况发生在Windows系统上,当在PyCharm终端中运行pip命令安装模块时,如果系统无法确定要使用哪个程序打开该文件,就会出现“你要如何打开这个文件”弹出窗口。 解决方法是: 选择“查找一个应用于此文件”的选项。在弹出的窗口…...
Axure多人协调的方式
当系统有多个模块,又由不同的产品经理负责设计,如何进行协调? 尝试过的方法 1)搭建Axure私服,用Axure的私服进行一个RP文件多人协同编辑; 2)用SVN管理RP文件,每次都要合并。 以上…...
【深度学习】【OnnxRuntime】【Python】模型转化、环境搭建以及模型部署的详细教程
【深度学习】【OnnxRuntime】【Python】模型转化、环境搭建以及模型部署的详细教程 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习】【OnnxRuntime】【Python】模型转化、环境搭建以及模型部署的详细教程前言模型转换--pytorch转on…...
React学习笔记(1.0)
在使用vite创建react时,有一个语言选项,就是typescript-SWC,这里介绍一下SWC。 SWC:可扩展的Rust的平台,用于下一代快速开发工具,SWC比Babel快20倍。 简单来说,就是用于格式转换的,…...
Axure RP实战:打造高效图形旋转验证码
Axure RP实战:打造高效图形旋转验证码 在数字产品设计的海洋中,验证码环节往往是用户交互体验的细微之处,却承载着验证用户身份的重要任务。 传统的文本验证码虽然简单直接,但随着用户需求的提高和设计趋势的发展,它…...
101012分页属性
4k页面 P(有效位):1有效,0无效 R/W(读写位):1可读可写,0可读 U/S(权限位):1(User),0(System) A(物理页访问位ÿ…...
从0-1 用AI做一个赚钱的小红书账号(不是广告不是广告)
大家好,我是胡广!是不是被标题吸引过来的呢?是不是觉得自己天赋异禀,肯定是那万中无一的赚钱天才。哈哈哈,我告诉你,你我皆是牛马,不要老想着突然就成功了,一夜暴富了,瞬…...
OpenClaw自动化边界:千问3.5-27B不适合处理的五类任务
OpenClaw自动化边界:千问3.5-27B不适合处理的五类任务 1. 为什么需要明确自动化边界? 去年冬天,我花了整整三天时间调试一个OpenClaw自动化流程——让AI帮我整理电脑里积压的200GB设计素材。当看到脚本误删了未备份的客户源文件时ÿ…...
告别传统方法:LogAnomaly如何用NLP技术提升日志异常检测准确率?
告别传统方法:LogAnomaly如何用NLP技术重构日志异常检测范式? 日志数据如同数字世界的神经系统,记录着系统运行的每一次"心跳"与"呼吸"。传统检测方法就像拿着放大镜寻找心电图异常,而LogAnomaly则带来了全新…...
Qwen2.5-0.5B手机AI入门:从下载到对话,30分钟全搞定
Qwen2.5-0.5B手机AI入门:从下载到对话,30分钟全搞定 1. 为什么选择Qwen2.5-0.5B-Instruct? 在移动设备上运行AI大模型听起来像是科幻场景,但Qwen2.5-0.5B-Instruct让它变成了现实。这个由阿里通义实验室开源的轻量级语言模型&am…...
爬虫自动化(DrissionPage)
目录 ?一.介绍: 下载DrissionPage,还是我们熟悉的pip: 环境准备: ?二.基本代码: 它对于的导包和类使用: 窗口的设置: 和获取的页面的滑动: 3.进一步认识DrissionPage: 浏览器可以多开…...
网站 SEO 标题要包含关键词吗
网站 SEO 标题要包含关键词吗?探讨最佳实践和SEO优化策略 在当今互联网时代,网站的SEO优化已经成为提升网站流量和用户体验的重要手段。其中,网站标题的优化也至关重要。网站 SEO 标题要包含关键词吗?这个问题备受争议,…...
ARP 协议超详细讲解
前言网络设备有数据要发送给另一台网络设备时,必须要知道对方的网络层地址(即IP地址)。IP地址由网络层来提供,但是仅有IP地址是不够的,IP数据报文必须封装成帧才能通过数据链路进行发送。数据帧必须要包含目的MAC地址&…...
2026年硕士论文降AIGC率必备工具:4款实测效果对比
试了四五款工具,最后留下来的就这几个。先说结论:降AIGC率这个需求,嘎嘎降AI(www.aigcleaner.com)是目前性价比最高的选择,4.8元/千字,达标率99.26%。 如果对价格不敏感、对知网特别严格&#…...
告别CANoe依赖:手把手教你用Visual Studio 2019为UDS $27服务开发通用DLL(附Python调用脚本)
从零构建UDS安全访问DLL:Visual Studio 2019实战指南与Python无缝集成 在汽车电子诊断领域,UDS(Unified Diagnostic Services)协议的安全访问服务($27服务)是保护ECU敏感操作的核心机制。传统方案往往依赖C…...
4月底就要交论文,现在开始降AI率来得及吗?完整应急方案
4月底就要交论文,现在开始降AI率来得及吗?完整应急方案 今天是4月1日。 如果你的论文要在4月底提交,现在翻出来一查,AI率50%,或者知网标红一片——你可能已经开始冒冷汗了。 先别慌。来得及,但要马上开始&a…...
从MATLAB/Python代码实现反推Newmark-β法:理解线性加速度假设如何变成迭代算法
从代码实现反推Newmark-β法:线性加速度假设的工程实践指南 在结构动力学分析中,地震响应、风荷载等时程分析问题常需要求解二阶微分方程。Newmark-β法作为经典数值解法,通过线性加速度假设将连续问题离散化。但教科书往往止步于公式推导&am…...
