2019. 5. 26. 15:28ㆍ리액티브 프로그래밍/Vue.js
뷰 인스턴스의 정의와 속성
뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위
앞에서 Hello Vue.js! 텍스트가 화면에 표시된 것은 인스턴스가 있었기 때문에 가능한 것이다
뷰 인스턴스 생성
new Vue {
...
}뷰 인스턴스 형식
전 글에서 작성한 Hello Vue.js! 샘플 코드에서 인스턴스와 관계된 부분을 다시 한 번 살펴보자.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Vue Sample </title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
message : 'Hello Vue.js!'
}
});
</script>
</body>
</html>new Vue() 라는 생성자로 뷰 인스턴스를 생성한 것을 볼수있다.
여기서 Vue()라는 생성자를 정의하지 않은 상태에서 어떻게 접근을 했을까 하는 의문을 가질 수 있다. 이것이 가능한 이유는 뷰 라이브러리를 로딩해 주었기 때문이다.
Vue()생성자의 파라미터로 el , data 라는 속성을 갖는 오브젝트를 넘겨주는 것을 볼 수 있다. 이것을 뷰 인스턴스의 옵션속성 이라고 하는데, data, el, template, methods, created 등이 정의되어 있다. 우리는 생성자를 사용하여 미리 정의되어 있는 옵션과 기능들을 특정 객체에 저장해놓고, 새로운 객체를 생성할때, 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는것이 가능해 진다.
el속성은 뷰로 만든 화면이 그려지는 시작점을 의미한다. 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야 한다.
el : '#app' -> 화면의 돔 요소 중 app라는 아이디를 가진 요소를 의미한다. #선택자는 css선택자 규칙과 동일하다.
따라서 <div id = "app"> 요소를 가리키게 되는 것이다.
data 속성은 뷰 인스턴스로 화면을 렌더링 할때 사용할 데이터들을 정의하게 된다.
message 라는 key에 'Hello Vue.js!' 라는 문자열 value를 매핑 시킨 상태에서 el 속성에 정의된 돔 요소를 찾아가 해당 요소의 { message } 를 Hello Vue.js 문자열로 치환 시키게 되는 것이다.
'리액티브 프로그래밍 > Vue.js' 카테고리의 다른 글
| Hello vue.js! 프로젝트 만들기 (0) | 2019.05.26 |
|---|