1.前言

1.js DOM驱动 nodejs事件驱动
2.vue可以理解成 数据驱动
3.所以vue一般是通过操作数据来实现界面的更新,通常不会去操作DOM,但实际开发场景总是千奇百怪,会有场景需要获取DOM
4.vue提供了获取DOM的方式 那就是 ref

---

2. ref使用

  <button ref="btn">按钮</button>
        <div ref="box">
            <h1> ref</h1>
            <p> 测试</p>
        </div>
        <hr>
        <div ref="myDiv">
            <p v-for="item in  10">{{item}}</p>
        </div>

---

3. 获取 DOM

<script setup>
import {onMounted} from 'vue'
  onMounted() {
                //获取的时候 this.$refs. 跟上需要获取标签的 ref的属性值
                console.log("获取标签内容", this.$refs.btn.innerHTML);
                console.log("获取子标签", this.$refs.box.children);
                console.log("获取标签的高度", this.$refs.myDiv.offsetHeight);
                console.log("获取标签的距离顶部的高度", this.$refs.myDiv.offsetTop);
            }
</script>

---

4. 这个比较简单 ,不写那么多了

界面的 audio 之类的都可以这样获取

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉