$el 옵션은 new 를 통한 Vue 인스턴스 생성시에만 유효하며, DOM 요소를 참조하는데 사용합니다.
$el 에 대한 기본 설명
$el은 Vue 인스턴스가 마운트된 DOM 요소를 참조하는 Vue 인스턴스의 속성입니다. 발음은 "엘"($el)이라고 부르며, “엘리먼트”의 줄임말입니다.
즉, mounted가 호출된 이후부터 사용 가능합니다.
예시 스크립트
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div id="app">
<button @click="helloworld">Button</button>
</div>
</template>
<script>
export default {
mounted() {
// 이 시점에서 $el을 사용할 수 있습니다.
console.log(this.$el); // '#app' 요소를 출력합니다.
},
methods: {
helloworld() {
// $el을 사용하여 DOM 조작하기
this.$el.querySelector('button').innerText = 'Hello!';
}
}
}
</script>
$el을 사용할 때 주의할 점은 $el을 통해 DOM을 직접 조작하는 것보다 데이터 바인딩과 지시자를 사용하는 것이 좋다는 것입니다. $el을 사용한 직접적인 DOM 조작은 예외적인 경우나 외부 라이브러리와의 통합 과정에서 필요할 때 주로 사용됩니다.
데이터 바인딩 : Mustache 문법(중괄호를 이용한 표현식)을 사용한
1
<div></div>
지시자 : HTML 태그에 v 접두어를 붙여 Vue의 기능을 사용하는 것
1
<a v-bind:href="testUrl">