Vue前端踩坑日常(一)之DOM元素

传统获取DOM元素的方法

相信大家获取DOM元素都不陌生。都是从html一路披荆斩棘到了Vue3的。还是重新回顾一下在JS中获取DOM元素的方法吧。

html 复制代码
<div class="body" id="container">
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <p>我是测试文字</p>
</div>
js 复制代码
let btn = document.getElementsByClassName("btn")
console.log(btn); 

let body = document.getElementById("container")
console.log(body)

代码执行结果 在HTML中,我们获取元素的方法就是通过getElementsByClassName或者是getElementById通过元素的类名或者是ID来对元素进行锁定的。

在Vue中获取DOM元素

直接在setup中获取

因为Vue中有生命周期的缘故,获取元素不能再setup中直接获取到DOM元素。DOM元素需要经过渲染,挂载到页面中才能获取到。当初第一次接触到Vue的时候,还沉浸在HTML的操作,直接在setup中操作DOM元素,结果给我迎头一棒。

相同的代码,但是在Vue中运行,直接就是null。我们仔细看获取的HTMLCollection,明明可以获取得到,那我们再来看看,打印这个数组的长度。

js 复制代码
let btn = document.getElementsByClassName("btn")
console.log(btn); 

let body = document.getElementById("container")
console.log(body)

console.log("btn的长度"+btn.length); 

神奇的事情出现了,数组的长度居然是0。后面我去查阅资料发现,我们只是能获取到这个DOM元素,但是没有办法进行操作。因为在created中,实例被生成的时候哦根本就没有这个元素被挂在上去。知道了原因之后,我又开开心心地把获取这个两个DOM元素的操作放到了onMounted钩子函数中,这样总没错了吧。

在onMounted钩子函数中获取

在onMounted的钩子函数中获取

Vue 复制代码
onMounted(()=>{
  let btn = document.getElementsByClassName("btn")
  console.log(btn); 
  let body = document.getElementById("container")
  console.log(body)
  console.log("btn的长度"+btn.length); 
})

在onMounted中获取能够成功获取。但是如果我们要发送请求的话,Mounted中是不会等待挂载完成再发送请求的,这样就会引出一个新的问题,如果有一个echarts的图,异步获取数据之后渲染在页面上,然后根据页面视口的宽度来改变echarts的宽度,这样子获取显然就不行了。那又该怎么样获取呢?我们下一章见~

相关推荐
sasaraku.17 分钟前
serviceWorker缓存资源
前端
RadiumAg1 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo1 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子3 小时前
React状态管理最佳实践
前端
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子3 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码4 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw54 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app