Vue 인스턴스
모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app' // app이라는 id를 가진 태그를 찾아서 인스턴스를 붙이겠다.
// => 붙이는 순간 해당 태그에서는Vue의 기능이 유효해진다.
}); // Vue 인스턴스 생성
console.log(vm); // Vue 인스턴스안에 어떤 속성과 API가 있는지 확인.
</script>
</body>
인스턴스에서 사용할 수 있는 속성과 API들
// 객체의 key, value 형태
new Vue({
el:, // 인스턴스가 그려지는 화면의 시점 (특정 HTML 태그)
data:, // 뷰의 반응성이 반영된 데이터 속성
template:, // 화면에 표시할 요소 (HTML, CSS)
methods:, // 화면의 동작과 이벤트 로직을 제어하는 메소드
created:, // 뷰의 라이프사이클과 관련된 속성
watch:, // data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
})각 Vue 인스턴스는 data 객체에 있는 모든 속성을 프록시 처리한다.
여기서 프록시 처리는 간단히 말하면 중간 대리인이처리하는 것이라고 생각하면 된다. 즉, data 옵션에 주어진 모든 속성들은 Vue 인스턴스 내부에서 직접 이용되지 않고 Vue 인스턴스와 data 옵션에 주어진 객체 사이에 중간 대리인을 두어 처리하는것이다.
# el 옵션
el은 element의 약자로써 Vue 인스턴스에 연결할 HTML 요소를 지정. 여기서 조심해야할 점은 여러개 요소에 지정하면 안된다는 것.
인스턴스 생성시에 미리 el옵션을 설정하는 것을 권장. Vue 인스턴스가 HTML요소와 연결되면 도중에 연결된 요소를 변경할 수 없기 때문.
# $
var data = { a: 1 }
var vm = new Vue({ el: '#example', data: data })
vm.$data === data
// => true vm.$el === document.getElementById('example')
// => true // $watch 는 인스턴스 메소드 입니다.
vm.$watch('a', function (newVal, oldVal) { // `vm.a`가 변경되면 호출 됩니다. })Vue 인스턴스의 내장 옵션들은 모두 $를 붙이면 접근이 가능
라이프사이클
각 Vue 인스턴스는 데이터 관찰을 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경 될 때 DOM을 업데이트해야 할 때 일련의 초기화 단계를 거칩니다.
그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클 훅 도 호출됨.
-
beforeCreate : Vue 인스턴스가 생성되고 데이터에 관한 관찰 기능 및 이벤트 감시자 설정 전에 호출
-
create : Vue 인스턴가 생성된 후에 데이터에 대한 관찰, 계산형 속성, 메서드, 감시자 설정이 완료된 후 호출
-
befoeMount : 마운트가 시작되기 전에 호출
-
mounted : el에 vue 인스턴스의 데이터가 마운트된 후에 호출
-
beforeUpdate : 렌더링,패치 전에 데이터가 변경될 때 호출
-
updated : 데이터의 변경으로 다시 렌더링되고 패치 된 후에 호출
-
beforeDestroy : Vue인스턴스가 제거되기 전 호출
-
destroyed : Vue 인스턴스가 제거되고 나서 호출 // 디렉티브 바인딩, 이벤트 해제 및 제거
'Vue.js' 카테고리의 다른 글
| Computed와 Watch (0) | 2019.01.08 |
|---|---|
| SPA(Single Page Application) (0) | 2019.01.06 |
| 템플릿 문법 (0) | 2019.01.06 |
| Vue.js 시작하기 (0) | 2019.01.02 |
| Vue CLI 로 Webpack Simple 프로젝트 생성 (1) | 2019.01.02 |
