1.前言
1.js DOM驱动 nodejs事件驱动
2.vue可以理解成 数据驱动
3.所以
vue一般是通过操作数据来实现界面的更新,通常不会去操作DOM,但实际开发场景总是千奇百怪,会有场景需要获取DOM4.
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之类的都可以这样获取
