728x90
● $el
- 컴포넌트 템플릿을 감싸고 있는 루트 요소는 $el (element) 을 사용해서 DOM을 직접 참조할 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue.js App</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<span>Hello</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
mounted: function(){
console.log(this.$el)
}
})
=> 라이프 사이클 중 mounted 이후부터 사용할 수 있음.
● $ref
- 루트 이외의 요소는 ref와 $ref 를 사용해서 참조할 수 있음
템플릿에서 대상 요소에 ref 속성을 지정하고 이름을 붙여줌
<div id="app">
<p ref="hello">Hello</p>
</div>
var app = new Vue({
el: '#app',
mounted: function(){
console.log(this.$refs.hello) //p요소를 DOM으로 다룰 수 있음
}
})
728x90
'Vue.js' 카테고리의 다른 글
| [Vue.js] 메서드 이벤트, 인라인 메서드 이벤트 (0) | 2024.01.18 |
|---|---|
| [Vue.js] 제어 디렉티브 v-pre v-once v-text v-html (0) | 2024.01.18 |
| [Vue.js] 리스트 변경 (0) | 2024.01.17 |
| [Vue.js] 반복렌더링 조건 (0) | 2024.01.17 |
| [Vue.js] key 역할 (0) | 2024.01.17 |
