Vue中的ref获取DOM结点 [前端][Vue框架]

最新推荐文章于 2024-05-21 15:22:48 发布
最新推荐文章于 2024-05-21 15:22:48 发布
阅读量765 收藏
点赞数
分类专栏： web前端 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57001006/article/details/125816985
版权

vue中的ref

vue中的ref的其实就相当于原生JS中的id属性值, Vue中的this. r e f s . r e f 属性值就相当于原生 J S 中的 d o c u m e n t . g e t E l e m e n t B y I d ( ) , 也就相当于 J Q u e r y 中的选择器 refs.ref属性值 就相当于原生JS中的document.getElementById(), 也就相当于JQuery中的选择器 refs.ref属性值就相当于原生JS中的document.getElementById(),也就相当于JQuery中的选择器() —> 说白了就是用来获取DOM元素的
我们给组件添加上ref属性之后, 通过this.$refs.ref属性值就可以获取到这个DOM元素
  • 由于我们的子组件的使用都是在父组件中的, 所以我们可以在父组件中使用子组件的时候给子组件加上ref属性, 这样我们就能在父组件中通过this.$refs.ref属性值来获取到这个DOM元素, 就可以在父组件中拿到了子组件对应的DOM元素, 那么既然我们在父组件中获取到了子组件DOM元素, 我们肯定就可以在父组件中拿到子组件中定义的数据模型和子组件中定义的方法 —> 我们就可以拿到子组件中定义的属性之后进行一个修改, 也可以对子组件中定义的方法进行一个调用
在实际开发中: ref属性很多时候都是和$nextTick一起使用来做到联动的效果, ref用来获取到DOM元素, nextTick负责获取最新的DOM
注意: this. r e f s . r e f 属性值或者 t h i s . refs.ref属性值 或者 this. refs.ref属性值或者this.refs[‘ref属性值’]的方式都可以获取到对应的ref属性值的DOM元素

  • JSON中就讲到过: 对于JSON中属性的获取我们有两种方式:
    ①: JSON对象.键名

    ②: JSON对象[“键名”]

96岁对抗java
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
一、获取dom元素节点 为元素添加一个ref属性 该属性的值可任取 以作为该节点的引用名 ref即为reference(引用)的前三个字母 This is title This is content 用Vue实例中的自带的$refs属性获取元素 用预先定义好的引用名来获取 即在页面中的ref属性定义的值 var vm=new Vue({ el:'#app', data:{}, methods:{ getElement() { console.log(this.$refs.myti
vue3 ref获取dom节点
seimeii的博客
08-01 771
vue3 ref获取dom节点
04-Vue：ref获取页面节点--很简单
最新发布
weixin_48053866的博客
05-21 781
在Vue中，通过 ref 属性获取DOM元素，我们当然可以使用JS原生的做法（document.getElementById）或者 jQuery 来获取DOM，但是这种做法却在无形中操作了DOM，在Vue框架中并不推荐这种做法。 我们可以通过`ref`属性获取DOM元素。 `ref`的英文单词是**reference**，表示**引用**。我们平时可以经常看到控制台会报错**referenceError**的错误，就和引用类型的数据有关。
vue的数据双向绑定和ref获取dom节点
weixin_34277853的博客
04-21 133
vue是一个MVVM的框架 业务逻辑代码即js部分是model部分， html是view部分。 当model改变的时候，view也会改变 view 改变是，model也会改变 <template> <div id="app"> {{msg}} <br> <input type="text" v-model="msg" ref...
Vue中使用 ref 获取dom元素
weixin_44090040的博客
03-25 524
<h3 id='myh3' ref='myh3'> </h3> methods:{ getElement(){ console.log( this.$refs.myh3.innerText) } } //组件也可以使用ref,让父组件调用子组件里的方法和属性值 <login ref='mylogin'> </login> methods:{ getElement(){ //父组件调用子组件里的属性值 .
使用ref获取Dom节点
一只想躺平却不敢躺平的小菜鸟
04-23 1426
使用ref获取Dom节点
在vue中获取dom元素内容的方法
08-30
在 Vue 中获取 DOM 元素内容是开发者经常遇到的问题，而解决这个问题的方法很多，今天我们就来讨论其中的一种，即使用 ref 属性来获取 DOM 元素内容。 使用 ref 属性获取 DOM 元素内容是 Vue 中最常用的方法，这种...
vue获取dom元素注意事项
08-28
vue获取DOM元素注意事项是vue开发中的一個重要知识点。获取DOM元素的高或内容是非常常见的需求，但是很多开发者都遇到了困难。那么，如何正确地获取DOM元素呢？ 首先，我们需要了解vue的生命周期。vue的生命周期中...
解决vue项目获取dom元素宽高总是不准确问题
11-20
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0]....补充知识：vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度） 使用 vue 的时候，想要
详解在Vue中通过自定义指令获取dom元素
12-08
vue.js 是数据绑定的框架，大部分情况下我们都不需要直接操作 DOM Element，但在某些时候，我们还是有获取DOM Element的需求的；  在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 ...
vue中获取dom元素
weixin_47745553的博客
02-03 1470
因为：我们会在标签上操作很多vue的指令，vue把所有的指令都执行完，拿到最新的dom节点（提高渲染效率）当我们让key的值变为true，通过ref调用输入框自动聚焦的原生focus方法后。操作dom，会有一个回调函数，回调函数会等待dom上vue指令全部执行完后才调用。如果操作dom节点，最好在dom节点的外层加一个this.$nextTick。把组件当成一个普通的标签，上面写上ref="起一个名字"直接使用会报错，因为父子组件的作用域是不同的独立的。通过this.$refs.起的名字获取。
4.Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
qq_35329964的博客
07-14 144
一、vue中的双向数据绑定 双向数据绑定 mvvm,mvvm是前端开发思想，主要是把前端每个页面分成了M，v,vm； vm是中间的调度者分割了M和V，每当V层想要获取或保存数据的时候都要经过vm层做中间的处理， m是model保存着每个页面的数据, v是view是每个页面的html结构，双向数据绑定是model改变影响view,view改变影响model,双向数据绑定必须在表单上用； view层值...
Vue-$refs-获取DOM 和 组件对象
m0_59878114的博客
09-28 424
<template> <div> <p>1. 获取原生DOM元素</p> <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1> </div> </template> <script> // 目标: 获取组件对象 // 1. 创建组件/引入组件/注册组件/使用组件 // 2. 组件起别名ref // 3. 恰当时机, 获取组件对象 expo.
vue中的 ref 和 $refs
weixin_30371469的博客
10-27 689
如图，ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： 在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合， console.log(this.$refs.input1)//<input...
Vue中使用ref获取DOM元素和组件引用
热门推荐
sleepwalker_1992的专栏
07-29 1万+
利用ref获取DOM元素 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;组件&lt;/title&gt; &lt;script src="vue.js"&
Vue获取DOM节点方式
qq_45829293的博客
03-08 6920
文章目录Vue获取DOM节点1、原生js获取节点的方式2、在vue项目中引入jquery3、ref属性4、直接使用DOM API寻找元素 Vue获取DOM节点 1、原生js获取节点的方式 document.getElementById() – 使用id获取方式较少 document.getElementByClassName() – 类名 document.getElementByTagName() – 标签名 document.getElementByName() – name属性，使用少
vue 重新渲染dom
中老年程序员
03-19 680
如果需要强制重新渲染一个组件，可以使用key属性。当key改变时，Vue会认为这是一个不同的元素，并且会创建一个新的DOM节点替换旧的节点。 下面是一个简单的例子，在这个例子中，每当你点击按钮时，componentKey的值会增加，因此key属性会变化，Vue会认为需要被重新渲染。这种方法可以强制Vue去重新渲染一个组件，从而更新其DOM。
Vue3 通过ref获取DOM结点
06-10
在 Vue3 中，可以通过 `ref` 函数来获取 DOM 节点。具体步骤如下： 1. 在模板中使用 `ref` 函数来定义一个引用，例如： ```html <div ref="myDiv">这是一个 div 元素 ``` 2. 在组件中使用 `setup` 函数来获取引用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值