오늘은 Vue.JS의 $refs으로 Dom에 접근하는 방법에 대해 포스팅 하려고 합니다.
일반적으로 Vue를 사용하면 직접 Dom요소에 접근할 일은 거의 없습니다.
하지만 Dom요소에 직접 접근하여 컨트롤 하게되는 경우가 간혹 있기 때문에 사용되는 방법이 있습니다.
dom에 ref속성을 정의하고 $refs태그를 이용하여 Dom요소에 접근을 할 수 있습니다.
아래 예제를 통해 보도록 하겠습니다.
// gs_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="addIncrease" ref="click_btn" class="btn_class" id="btn_id">click_me</button>
<p ref="ref_p">test vue ref</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el : '#app',
data : {
message : 0
},
methods: {
addIncrease(){
this.message +=1
console.log(this.$refs.click_btn.parentNode);
console.log(this.$refs.click_btn.id);
console.log(this.$refs.click_btn.textContent);
this.$refs.click_btn.textContent = "do not click";
console.log(this.$refs.click_btn.textContent);
console.log(this.$refs.ref_p);
// document.getElementById("btn_id"); html document
// $("#btn_id"); JQuery
}
}
})
</script>
</body>
</html>
button태그에는 ref="click_btn" 속성을 입력하고, p태그에는 ref="ref_p" 속성을 입력하였습니다.
<button v-on:click="addIncrease" ref="click_btn" class="btn_class" id="btn_id">click_me</button>
<p ref="ref_p">test vue ref</p>
일반적으로 javascript의 document 또는 JQuery에 익숙하신분들
아래 내용과 같은 id 또는 class 속성을 이용하여 제어하는 것이 익숙할것입니다.
document.getElementById("btn_id");
$("#btn_id");
Vue.JS 또한 Dom에 접근하는 방법은 크게 다르지 않습니다.
선언한 ref를 이용하여 아래 소스와 같이 document 또는 JQuery에 사용했던 것처럼 형태만 조금 다를 뿐이지
사용이 가능 합니다.
this.$refs.click_btn
위 소스의 내용에서 간단한 내용들로 console을 출력하여 테스트를 했습니다.
console.log(this.$refs.click_btn.parentNode);
console.log(this.$refs.click_btn.id);
console.log(this.$refs.click_btn.textContent);
this.$refs.click_btn.textContent = "do not click";
console.log(this.$refs.click_btn.textContent);
console.log(this.$refs.ref_p);
웹 브라우저를 통해 다음과 같은 결과를 얻을 수 있었습니다.
값을 불러올 수도 있고 값을 지정할 수도 있습니다.
지금까지 Vue.JS의 $refs으로 Dom에 접근하는 방법에 대한 포스팅이였습니다.
내용이 도움이 되셨다면 하단에 있는 공감버튼을 클릭해주시면 감사하겠습니다.
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] step 3. 컴포넌트(component) (0) | 2022.05.03 |
|---|---|
| [Vue.JS] step 2. 인스턴스(instance) (0) | 2022.04.30 |
| [Vue.JS] step 1. 시작하기 - 환경설정 (0) | 2022.04.28 |
| [Vue.JS] error defined but never used no-unused-vars 해결방법 (0) | 2022.01.12 |
| [Vue.JS] Windows Terminal 실행 오류 "vue : 이 시스템에서 스크립트를 실행할 수 없으므로 ..."에 대한 해결 방법 (0) | 2022.01.02 |
