먼저, 설치한 텍스트 에디터나 IDE 중 자신이 원하는 것을 키고, index.html 파일 하나를 생성해봅시다.
<html>
<head>
<title> Vue Start </title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue ({
el : "#app",
data : {
message : "Hello Vue!"
}
});
</script>
</body>
</html>아마 뷰를 처음 해본 사람이라도, 대충 어떻게 데이터가 입혀지겠구나, 생각은 들겁니다.
여기서 vue는 CDN 방식으로 사용하고 있으므로 본인이 귀찮다면 파일을 직접 프로젝트 내에 넣어도 상관 없습니다.
텍스트 에디터가 사용하기 귀찮다면, 텍스트 파일로 만들고, 확장자를 html로 바꿔주면 됩니다.
만약 실행 후, 개발자 도구에서
"You are runing Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html" 이란 것이 뜨면,
이 파일을 서버에서 띄우지 않고 파일 시스템에서 실행했기 때문에 뜨는 것이므로 무시해도 된다고 합니다.
즉, 주소 창에 file:// 형태로 접근한 파일과 http:// 형태로 접근한 파일에 대해 뷰 개발자 도구가 각기 다른 설정을 적용합니다. 이를 해결하고 싶ㅍ다면, Vue.js Devtools에서 파일 URL에 대한 엑세스를 허용하면 됩니다.
어쨌든, 이어가면 뷰로 화면을 개발할 때 중요한 기술 요소는 인스턴스와 컴포넌트가 있습니다.
뷰 인스턴스(Instance)는 뷰로 화면을 개발 하기 위해 필수적으로 생성해야 하는 기본 단위입니다.
위 코드에서 어느 부분이 Instance냐 하면, 당연히 new Vue ({ }) 부분입니다.
자바에서도 어떤 객체에 대한 인스턴스를 생성할 때 new 로 생성하죠! 비슷해서 알기 쉽습니다.
new Vue ({
el : "#app",
data : {
message : "Hello Vue!"
}
});이게 코드가 예쁘게 안들어가요.. 근데 또 공들이자면 시간이 너무 오래걸려서 ;;
즉, new Vue로 인스턴스를 하나 생성해주고, 그 안에 el 속성과 data 속성이 있게 됩니다.
el 속성은 우리가 자바스크립트나 제이쿼리를 사용할 때처럼 id를 지정해주고 있고,
뷰 인스턴스로 화면을 렌더링 할 때, 화면이 그려질 위치의 돔 요소를 지정해주는 역할을 합니다.
data는 특정 데이터를 넣어 해당 영역에 붙여넣게 됩니다. 여기서는 {{ message }} 부분에 매칭되겠네요.
여기서 new Vue({ }) 에서 Vue를 생성자라고 하고, Vue 생성자는 뷰 라이브러리를 로딩한 후 접근할 수 있습니다.
우리가 자바에서 생성자를 사용하는 이유는 특정 객체를 새로 생성할 때 기존 기능과 쉽게 기능을 확장하기 위함이므로
객체지향 프로그래밍에서 객체 정의 방식으로 미리 정의된 속성, 메서드를 재활용하기 위함입니다.
그렇다면, 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 속성이며, 위의 el, data, template 등의 다양한 속성들을 의미합니다. 즉, 우리는 이미 정의되어 있는 data 인스턴스 옵션 속성에 "Hello Vue!"를 넣어 재정의한 것입니다.
또, el : "#app"에서 #은 CSS 선택자 규칙과 같으므로 id 선택자를 의미합니다.
이외에도 미리 정의 되어있는 속성 중 몇 가지는 다음과 같습니다.
template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의.
method : 화면 로직 제어와 관계된 메서드를 정의하는 속성. (클릭 이벤트 처리 등)
created : 뷰 인스턴스가 생성되자 마자 실행할 로직 정의
자세한 것은 책을 공부하면서 후반부에 더 상세하게 볼 예정입니다!
마지막으로, 인스턴스의 유효 범위입니다.
인스턴스 유효 범위는 당연하게도, el 속성과 관계가 있습니다.
위 코드에서
<div id="app">
{{ message }}
</div>뷰 인스턴스는 #app 영역을 찾아, message라는 곳에 data를 치환할 것입니다.
#app 영역에있는 메세지를 바꾸라는 의미였으니까요.
<div id="app">
</div>
{{ message }}그런데 이렇게 message가 지정한 div 영역을 벗어나게 되면 유효하지 않게 되겠죠.
당연히 {{ message }}는 "Hello Vue!" 로 치환되지 않고 Plain Text로 표현되게 됩니다.
요약하자면, 뷰 인스턴스가 생성되고 부착되는 과정은 다음과 같습니다.
1) 뷰 라이브러리 파일 로딩
2) 인스턴스 객체 생성 (옵션 속성 포함)
3) 특정 화면 요소에 인스턴스를 부착 (여기서는 #app 이었으므로 #app에 부착!)
4) 인스턴스 내용(data 등)이 화면 요소로 변환 (치환되는 과정)
5) 변환된 화면 요소를 사용자가 비로소 최종 확인
다음 포스트에는 뷰 인스턴스의 라이프사이클에 대해 공부해봅시당..!
'Vue.js' 카테고리의 다른 글
| Vue.js - #6 데이터 흐름(상-하, 하-상, 동일), 이벤트 버스(Event Bus) (0) | 2021.10.24 |
|---|---|
| Vue.js - #5 사용자 입력 제어, v-on:click, 함수 사용 (0) | 2021.10.15 |
| Vue.js - #4 디렉티브, 반복문 (0) | 2021.10.15 |
| Vue.js - #2 환경 구성 (0) | 2021.10.07 |
| Vue.js - #1 기본 (0) | 2021.10.07 |
