[Vue3] Vue에서 DOM에 접근하는 방법

Vue에서 hammer.js를 이용하려고 했는데 실제 dom element를 전달해줘야 했다.

Vue는 가상 DOM을 이용하는데 어떻게 해야 할까?

템플릿 참조를 이용하면 된다.

 

먼저 ref와 onMounted를 꼭 import 해준다.

import { ref, onMounted } from 'vue'

onMounted는 컴포넌트의 DOM 트리가 문서 내에 있음을 보장한다.

onMounted 전에는 DOM에 접근할 수 없다.

https://ko.vuejs.org/guide/essentials/lifecycle.html

생명 주기 훅 | Vue.js

 

그리고 아래와 같이 사용하면 된다.

 

<script setup>
import { ref, onMounted } from 'vue'

const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

 

이때 :ref가 아니라 ref인것에 주의한다.

 

 

https://ko.vuejs.org/guide/essentials/template-refs.html

템플릿 참조 | Vue.js