vue3中直接操作dom_vue3 操作dom

注意：本文所使用的vue3版本为3.2.6
在vue2的时候我们操作dom是这样子使用的

<template>
	<div class="box">
		<div ref="drag" class="box_drag">我会被拖动</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			console.log(this.$refs.drag)
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

但是，这个方法在vue3里面直接无效的
然后以为想着直接使用dom函数操作dom的

<template>
	<div class="box">
		<div id="drag" class="box_drag">我会被拖动</div>
	</div>
</template>

<script setup>
	console.log(document.getElementById('drag'))
</script>
1
2
3
4
5
6
7
8
9

可是，我还是太年轻了

由于vue3使用是setup没有this指向，所以，我们就要从vue的模块里拿，我当时就想到了ref，但是觉得怪怪的，本来以为想着，ref只能用于做一个响应式对象，然后我去vue3的官方文档翻了好一会，可算在一个角落翻到了…文档地址

最终代码

<template>
  <div class="box">
    <div ref="drag" class="box_drag">我会被拖动</div>
  </div>
</template>

<script setup> // vue3的语法糖，等同于在setup里面编写
import { onMounted, ref } from 'vue'
const drag = ref() //核心，如果这里是ts的话。这个ref是一个泛型ref<你的类型>()
onMounted(() => {
  console.log(drag.value)
})

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

总结。说到底，还是文档比较好用