vue3中直接操作dom

原文地址：vue3中直接操作dom_小蓝阿姨的博客-CSDN博客_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>

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

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

<script setup>
    console.log(document.getElementById('drag'))
</script>

可是，我还是太年轻了

由于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>
 

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