본문 바로가기
Front-End/Vue

[장기효(캡틴판교) - Vue.js 시작하기] 2. 인스턴스

by hongdor 2021. 1. 23.

출처 : 인프런의 장기효(캡틴판교)님의 강좌 / 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 컴포넌트로 자동지정된다.

댓글0