(2021.01.12)
vue의 가장 기본인 뷰 인스턴스와 컴포넌트를 공부했다.
3장도 생각보다 양이 적었다.
진짜 하루 2시간 7일 완성 가능한 책일지도 모르겠다는 생각이 들었다....
book.naver.com/bookdb/book_detail.nhn?bid=13256615
Do it! Vue.js 입문
Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! 실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! 실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.j
book.naver.com
참고도서: 두잇뷰입문
뷰 인스턴스
뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다.
뷰 인스턴스 형식
new Vue ({
...
});
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Vue.js 시작한다!!!'
}
});
</script>
</body>
</html>
위의 vue 예제 코드에서 인스턴스만 빼내어서 보면
new Vue ({
el: '#app',
data: {
message: 'vue.js 시작한다!!!'
}
});Vue를 인스턴스 생성자라고 한다.
Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다.
--> 생성자를 사용하는 이유는
뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서이다.
뷰 인스턴스 옵션 속성
: 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성
위의 예제에서는 data라는 속성을 사용했다.
data 안에 message 라는 새로운 속성을 추가하고, vue.js 시작한다!!! 라는 값을 주었다.
| 속성 | 설명 |
| template | 화면에 표시할 HTML,CSS 등의 마크업 요소를 정의하는 속성 |
| methods | 화면 로직 제어와 관계된 메서드를 정의하는 속성 |
| created | 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성 |
뷰 인스턴스의 유효 범위
뷰 인스턴스를 생성하면 HTML 의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다.
--> 그 범위를 뷰 인스턴스의 유효 범위라고 한다.
이때는 코드가 원하는대로 출력된다.
그런데 {{message}}가 <div if = 'app'> 태그 밖에 있을 경우에는 제대로 출력되지 않는다.
'개발 공부 > Vue.js' 카테고리의 다른 글
| 05. Vue.js - 뷰 라우터 (1) | 2021.01.18 |
|---|---|
| 04. Vue.js - 뷰 컴포넌트 통신 (0) | 2021.01.13 |
| 03. Vue.js - 뷰 컴포넌트 (0) | 2021.01.12 |
| [오류해결] 뷰 개발자 도구 오류 해결 (0) | 2021.01.11 |
| 01. Vue.js - 개발 환경 세팅하기(아톰, Node.js, 뷰 개발자 도구) (2) | 2021.01.11 |
