Vue 通过什么属性获取 DOM 元素?

Question

Vue 通过什么属性获取 DOM 元素?

Answer 1

vue2.x

<template>
    <div ref="oBox"></div>
</template>

<script>
export default {
    mounted () {
        console.log("节点", this.$refs.oBox)
    }
}
</script>

vue3.x

<script setup>
const oBox = ref()

onMounted(function () {
    console.log("节点", oBox.value)
})
</script>

<template>
    <div ref="oBox"></div>
</template>

Answer 2

<div ref="box">
this.$refs.box....
可参考：https://blog.csdn.net/weixin_...

Answer 3

vue2
<template>
<div ref="targetDom"></div>
</template>
<script>
console.log(this.$refs.targetDom)
</script>

vue3
<template>
<div ref="targetDom"></div>
</template>
<script setup>
import { ref } from 'vue'
const targetDom = ref()
console.log(targetDom.value)
</script>