如何在vue项目中获取dom节点

最新推荐文章于 2024-05-21 15:22:48 发布
最新推荐文章于 2024-05-21 15:22:48 发布
阅读量4.4k 收藏 10
点赞数
分类专栏： 前端开发 vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangtaox8/article/details/103075509
版权
前端开发 同时被 3 个专栏收录
177 篇文章 3 订阅
订阅专栏
js
98 篇文章 0 订阅
订阅专栏
vue
16 篇文章 0 订阅
订阅专栏
一、问题由来

在vue项目中，我需要获取一个dom的offsetHeight、scrollHeight等，但是不知道如何在vue中获取一个dom节点。毕竟是新手，所以在看了很多大佬的博客外，打算做一个小的总结，以便梳理知识，和大家共勉以及一起进步。

二、3种方法

1、利用js原生的获取dom节点的方法：document.getElementById等

2、可以在vue项目中引入jquery，具体怎么引入可以百度，已经有很多人写过引入方法了

3、可以在vue项目中利用vue提供的api在dom标签的属性上加上一个ref="dom的名字"属性，然后通过vue实例的this.$refs.dom的名字来直接获取这个元素节点，

LTIven
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
节点属性、offset*获取元素尺寸、offsetLeft获取元素定位
YY的博客
10-20 1062
offsetWidth、offsetHeight、clientWidth、clientHeight、offsetLeft、offsetTop
在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
vue中点击节点获取节点的位置
lxy123456780的博客
03-05 5679
在节点绑定点击事件 <div @click="posilDiv($event)"></div> posilDiv(event){ var DOM = event.currentTarget; // 获取节点距离浏览器视口的高度 var top = event.currentTarget.getBoundingClientRect().top; // 获取节点距离浏览...
04-Vue：ref获取页面节点--很简单
最新发布
weixin_48053866的博客
05-21 792
在Vue中，通过 ref 属性获取DOM元素，我们当然可以使用JS原生的做法（document.getElementById）或者 jQuery 来获取DOM，但是这种做法却在无形中操作了DOM，在Vue框架中并不推荐这种做法。 我们可以通过`ref`属性获取DOM元素。 `ref`的英文单词是**reference**，表示**引用**。我们平时可以经常看到控制台会报错**referenceError**的错误，就和引用类型的数据有关。
v-for循环动态 ref ，动态ref获取循环dom元素坐标信息
weixin_41346436的博客
09-17 948
动态 ref 数据
vuejs基础之组件和获取dom原生对象方法
上善若泪
10-31 1986
文章目录1 组件概念1.1 组件定义1.2 与模块区别2 组件使用2.1 创建组件2.1.1 全局组件2.1.1.1 使用 Vue.extend配合Vue.component方法2.1.1.2 直接使用 Vue.component 方法2.1.1.3 将模板字符串，定义到script标签中2.2 组件中的data 1 组件概念 1.1 组件定义 什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 1
Vue Render函数创建DOM节点代码实例
10-15
在Vue中，`render` 函数接收一个参数 `createElement`，这个函数是用于创建虚拟DOM节点的。在上述代码实例中，我们可以看到如何使用 `createElement` 创建DOM元素： 1. **属性传递**：`createElement` 接受一个标签...
利用vue.js插入dom节点的方法
12-29
本文主要介绍的是vue.js插入dom节点的方法，下面话不多说，来看看详细的介绍吧。 html代码： <div id=app></div> js代码： var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var ...
解决vue项目获取dom元素宽高总是不准确问题
11-20
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0]....补充知识：vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度） 使用 vue 的时候，想要
在vue中获取dom元素内容的方法
08-30
本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下
vue获取dom元素的内容
Gcalolin的博客
08-25 2万+
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例 当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组比如我现在要实现的效果是点击用v-for生成的li ，获取到
在vue中获取dom元素
热门推荐
xiaogezl的博客
04-26 11万+
在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而操作该dom元素，以下是个例子，可以当做参考 <template> <div> <div id="box" ref="mybox"> DEMO </div> </div> </template> &l...
vue获取原始dom节点
zjsfdx的博客
06-13 3837
需求：需要获取dom节点，但是不能使用id获取dom元素。 vue里提供了ref属性获取dom节点。 在nextTick函数回调后就可以更新dom了 this.$nextTick(function(){ this.$refs.list })...
Vue.js实例学习：获取DOM元素
若水弹丸之地
02-19 1万+
一、获取DOM元素 在Vue中获取DOM元素，我们可以用ref。 用法(和React一样)： （1）在组件的DOM部分，任意标签中 写上：ref=&quot;xxx&quot; （2）通过组件对象 this.$refs.xxx 获取到元素 1、获取HTML标签的DOM 例1： &amp;lt;div id=&quot;app&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;script type=
Vue中获取要操作的元素DOM
夏尔的小酒馆
12-27 2万+
在使用Vue的时候，有时候我们希望直接用Js操纵DOM来实现某些效果，具体实现只用利用Vue提供的ref属性以及this.$refs即可实现。下面放一个小DEMO！ Examples .box{width: 200px;height: 200px;border: 1px solid #f00;} 这是一个盒子
vue中操作Dom节点的方法
baichen1370的博客
07-28 2668
1.vue中ref操作dom节点 <template> <div id="app"> <div ref="box">1111111111111111</div> <button @click="changeColor">改变</button> </div> ...
Vue渲染DOM节点
阳光下的冷静的博客
05-17 5244
Virtual DOM Vue实例挂载的最后一个环节：渲染DOM节点。在渲染真实DOM的过程中，Vue引进了虚拟DOM的概念，虚拟DOM作为JS对象和真实DOM中间的一个缓冲存，极大的优化了JS频繁操作DOM的性能问题 浏览器的渲染流程 当浏览器接收到一个Html文件时，JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度，它首先会将html文件解析成一个DOM树，与此同时，浏览器将识别并加...
vue中DOM的操作
李特成的博客
11-22 949
&lt;template&gt; &lt;div&gt; &lt;li class="sidebar-list" v-for="(item, index) in meunList" @click="setPageMenu(index)" ref="menuItem" :key="index" :id="index"&am
vue中获取dom的父节点
10-22
2. 在Vue项目中引入jQuery，使用jQuery的方法获取父节点，例如：let parent = $('#child').parent(); 3. 使用ref属性，在子组件中给父节点添加ref属性，例如：<div ref="parent"></div>，然后在子组件中使用this.$...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值