728x90
출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js
2. 인스턴스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data:{
message:'hi'
},
});
</script>
</body>
</html>
- Vue 객체가 인스턴스이다.
- el(element) 속성을 통해 <div id="app"></div> 와 연결했다.
- data 속성을 통해 message 라는 변수에 'hi'라는 문자열을 머금도록 했다.
- Vue 인스턴스는 태그와 JS를 연결하는 역할을 한다. 그리고 편의성을 제공한다.
- new Vue로 선언하는 경우 대개 body 다음 최상위태그(여기서는 div)를 등록할 때 쓴다. root 컴포넌트로 자동지정된다.
728x90
'Front-End > Vue' 카테고리의 다른 글
| [장기효(캡틴판교) - Vue.js 시작하기] 5. router (0) | 2021.01.24 |
|---|---|
| [장기효(캡틴판교) - Vue.js 시작하기] 4. props/ event (0) | 2021.01.23 |
| [장기효(캡틴판교) - Vue.js 시작하기] 3. 컴포넌트 (0) | 2021.01.23 |
| [장기효(캡틴판교) - Vue.js 시작하기] 1. Vue.js 특징 (0) | 2021.01.23 |
| [장기효(캡틴판교) - Vue.js 시작하기] 0. 개발 환경설정 (0) | 2021.01.23 |
댓글