在VUE里面ref获取dom，$ref和使用echarts，nextTick很重要

最新推荐文章于 2024-06-26 10:05:35 发布
最新推荐文章于 2024-06-26 10:05:35 发布
阅读量6.1k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qlin_11/article/details/99587909
版权

在VUE里面获取dom和使用echarts
去vue官网好好看看ref和nextTick
首先说一下原因吧，就是echarts里面需要使用dom来挂载画布，这就意味着我们要获取dom，获取dom的方法呢有几种，普遍的就是getElementById，在vue里面还有一种方法，就是使用ref，在标签中写上ref=“test”，在methods里面就使用this.$ref.test 就可以实现获取dom，这里要注意$ref要注意下面两点。

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

这里项目里面就是在mounted(){} 钩子中调用，调用后使用了if（this.$ref.test）来判断是否为空，跳过空状态。注意这个不能直接判断而不使用mounted，不然可就是真的空着的了。
this.$nextTick(()=>{})这个的意思就是说在dom状态更新之后立即执行回调函数，这就是说获取新的dom，可以看看下面的博客。记住要点，vue对dom的更新diff是异步的。
https://www.jianshu.com/p/98148196a1f2

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

https://www.cnblogs.com/goloving/p/9404099.html

林强181
关注
在vue中使用Echarts
weixin_43709908的博客
01-14 435
安装 安装其实是比较简单的，直接在项目中打开命令行工具，执行npm install echarts --save 也可简写为npm i echarts -S，即将Echarts安装到项目生产环境中。 安装完成之后我们需要打开main.js文件，在上边找一个位置进行引入Echarts，并将其挂载到vue的原型中，具体代码如下 import echarts from 'echarts' Vue...
Vue中使用ref
weixin_42365757的博客
11-02 842
Vue中使用ref 我们虽然在使用vue的时候是不会去操作它的dom的，但是最近，我在做vue项目的时候，遇到了某些情况，不得不去操作它的dom，那么遇到这种情况，我们应该如何去处理呢？ 我们使用ref去绑定到div中，之后我们通过this.refs（获取到div中所有的引用）下面是具体的例子： <template> <div class="fans-container"> <!-- 1. 为 ECharts 准备一个具备大小（宽高）的画布容器 DOM --&g
Vue 如何实现获取 dom 元素（父组件获取子组件的dom / ref），真的很详细
最新发布
(黎子)人生编码
06-26 2313
在 Vue 中，DOM 元素通常指的是由 Vue 实例管理的 HTML 元素。Vue 使用虚拟 DOM 来提高性能，这意味着实际的 DOM 操作比传统方法更少、更高效。ref是 Vue 中的一个属性，用于给元素或子组件注册引用信息。引用信息将会在组件的$refs对象上注册。你可以使用ref来访问 DOM 元素或子组件实例。
Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第5章 Vue.js组件 5.5 Vue获取DOM元素的方法(ref)
谢谢你们的关注
08-28 1004
Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第5章 Vue.js组件 5.5 Vue获取DOM元素的方法(ref)
echart 在v-for中使用 refs 的错误总结
qq_40177740的博客
08-07 727
echart 使用 refs 初始化报错 this.dom.getContext is not a function 排查发现： 单独使用ref时，没问题。 和v-for一起使用时,绑定的ref报错。 根据vue官网信息： ref不是响应式的，不应该去绑定，而是应该直接使用 ref=“XXX”的格式 由此 ，ref绑定的XXX不再是一个单独的dom而是一个dom数组。 所以，知道这个信息之后，就可以解决大多数ref错误原因了。 ...
vue3.0中使用ref获取dom元素
浩星
07-23 6135
前言： 我们在vue2.0中使用ref是比较轻松的，但是3.0的方法是有改动 vue3.0官方入口 vue2.0中： 页面上定义： <div ref='abc'><div> 拿dom： this.$refs.abc vue3.0中： 1、使用场景-echarts图中用ref获取dom <div ref='echart'><div> import { onMounted,toRefs, ref,reactive } f...
详解vue中$nextTick和$forceUpdate的用法
10-15
在Vue.js中，`$nextTick` 和 `$forceUpdate` 是两个非常重要的更新调度方法，它们主要用于处理数据变化后的DOM更新。本文将深入探讨这两个方法的用途、工作原理以及何时使用。 首先，我们来理解`$nextTick`。在Vue...
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
在Vue.js中，`this.$refs` 是一个非常重要的特性，它允许开发者访问Vue实例挂载的DOM元素或子组件实例。然而，在某些情况下，尝试通过`this.$refs`获取DOM或组件时可能会遇到错误。本文将深入探讨这个问题及其解决...
Vue 中$refs、$nextTick的使用及场景
weixin_69742797的博客
05-23 474
1、vue如何获取真实的DOM元素？ --可以通过 id 获取-- --还可以通过 ref定义值 $refs 获取-- <template> <div> <h1 ref="username" id="a">获取原生的DOM</h1> </div> </template> <script> export default { //钩子函数 mounted 加载完D...
解决vue项目获取dom元素宽高总是不准确问题
11-20
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0]....补充知识：vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度） 使用 vue 的时候，想要
前端开发：$nextTick()的使用及原理
热门推荐
软贱开发攻城狮
05-31 1万+
在前端开发中，涉及到JS原生的使用原理是非常重要的知识点，尤其是在实际工作过程中会遇到各种复杂的业务需求场景，以及具体开发中可能会遇到一些涉及基于JS原理的使用，这都要求开发者能够很好的了解和掌握JS原生的常用原理。那么本篇博文就来分享一下关于$nextTick()的使用及原理，该内容不仅在日常前端开发中是比较重要核心的知识点，而且在前端求职面试时候面试官必考的知识点，总结记录一下，方便后期查阅使用。
Vue通过this.$refs无法获取DOM
dadada_youzi的博客
12-09 1299
1、在一个页面点击显示弹窗的时候，无法用this.$refs获取到DOM，但在父页面是可以得到的 <div :style="{border:'1px solid #DDDDDD',width: '100%',height:'400px',}" ref="myChartModal"></div> let myChartModal = this.$echarts.init(this.$refs.myChartModal); 报错： 原因：看了一些博客，是“因为ref本身是作
在vue中使用ref标签，调用Echarts的 getZr()方法，实现柱状图的点击事件
cm1454961的博客
04-27 577
在echarts的日常开发中，有遇到要实现柱状图的某根柱子的点击事件，记录一下
this.$refs获取不到dom的问题——恒生寻常问道实习记录
versterben的博客
08-04 2525
实习记录
Vue.js中$refs{}获取DOM元素
PILIpilipala的博客
11-19 1万+
如果我们想获取DOM元素，一般使用js中的document.querySelector来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs{} $refs{}----获取标签元素 说明：一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例 作用：减少DOM操作 用法： 原生方法 此例是利用原生jsdocument.getElementById()获取元素 <div id="app"> <inp
vue中v-for、ref、echarts画图的注意事项
whaiyj1314的博客
12-30 1502
vue+v-for+refs+echarts
vue3.0中引入echarts(ref获取dom)
浩星
07-23 6638
前言： vue3.0中的方法和echarts升级到5以后的方法都有改变。 vue3.0官方入口echart5官方入口 目录: 实现效果： 方法一：使用id来绑定页面dom，引入echart 操作步骤： 1、引入echart 2、页面上定义dom 3、具体方法 4、样式 方法二：使用ref来绑定页面dom，引入echart 操作步骤： 1、引入echart 2、页面上定义dom 3、具体方法 4、样式 实现效果： 方法一：使用id来绑定页面dom，...
vue2使用echarts
Garryon的博客
08-03 276
先准备一个容器，Echarts 会在指定的 DOM 容器中渲染图表。创建一个 echarts 实例，并将其绑定到指定的 DOM 容器上。设置图表配置项和数据。
vue中eCharts的基本使用
m0_56274171的博客
11-09 701
//vue的原型上挂载echarts //在main.js文件中 import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts; //在组件template中 <div class="content"> <div class="w100 h100" ref="echarts1"></div> </div> export default{ data(){ re.
vue3 ref获取dom元素是null
05-26
在Vue 3中使用ref获取DOM元素时，需要注意以下几点： 1. 在模板中使用ref指令时，要确保指令绑定的变量是一个响应式引用，可以使用`ref()`函数来创建一个响应式引用。 2. 在模板中使用ref指令时，要确保指令绑定的元素已经被渲染出来了，否则获取到的DOM元素为null。 3. 在组件中使用ref指令时，要确保指令绑定的元素在组件的“$nextTick”钩子函数中才能被访问到。 下面是一个获取DOM元素的示例代码： ```html <template> <div> <input type="text" ref="inputRef" /> <button @click="handleClick">获取输入框的值</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const inputRef = ref(null); const handleClick = () => { console.log(inputRef.value.value); }; return { inputRef, handleClick, }; }, }; </script> ``` 在这个示例中，我们使用“ref”函数创建了一个响应式引用“inputRef”，并将其绑定到输入框上。在“handleClick”函数中，我们通过“inputRef.value.value”来获取输入框的值。注意，我们需要使用两个“value”来访问DOM元素的值，因为“inputRef.value”本身是一个响应式引用。 如果你在模板中使用了ref指令，并且获取到的DOM元素为null，那么可以尝试在组件的“$nextTick”钩子函数中访问DOM元素。例如： ```html <template> <div> <div ref="containerRef"> <p>一些内容</p> </div> </div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const containerRef = ref(null); onMounted(() => { console.log(containerRef.value.clientHeight); }); return { containerRef, }; }, }; </script> ``` 在这个示例中，我们使用“ref”函数创建了一个响应式引用“containerRef”，并将其绑定到一个“div”元素上。在“onMounted”钩子函数中，我们通过“containerRef.value.clientHeight”来获取该元素的高度。由于高度的计算需要等待该元素渲染完成，因此我们需要在组件的“$nextTick”钩子函数中访问该元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值