- Vue 인스턴스
- 템플릿 문법
- Computed Properties and Watchers
- 클래스 / 스타일 바인딩
- Conditional Rendering
- 리스트 뿌리기
- 이벤트 핸들링
- 폼 입력 바인딩
- 반응성에 대해 좀 더 깊이 알아보기
- 트렌지션 효과
- Transitioning State
- Render 함수
- 사용자 정의 디렉티브(directive:명령어)
- 컴포넌트를 파일(뷰 파일) 하나로 작성하기
- Production 으로 디플로이 하기
- 상태 관리
- 유닛 테스트
- 서버 사이드 렌더링
- Migration from Vue 1.x
- Migration from Vue Router 0.7.x
- Migration from Vuex 0.6.x to 1.0
- 다른 프레임워크와의 비교
- Join the Vue.js Community!
Every Vue vm is bootstrapped by creating a root Vue instance with the
Vue constructor function:
Although not strictly associated with the MVVM pattern, Vue’s design was no doubt inspired by it. As a convention, we often use the variable
vm (short for ViewModel) to refer to our Vue instances.
When you instantiate a Vue instance, you need to pass in an options object which can contain options for data, template, element to mount on, methods, lifecycle callbacks and more. The full list of options can be found in the API reference.
Vue constructor can be extended to create reusable component constructors with pre-defined options:
Although it is possible to create extended instances imperatively, most of the time it is recommended to compose them declaratively in templates as custom elements. We will talk about the component system in detail later. For now, you just need to know that all Vue components are essentially extended Vue instances.
각각의 Vue 인스턴스는
data 객체에서 발견되는 모든 속성을 프락시 한다 :
It should be noted that only these proxied properties are reactive. If you attach a new property to the instance after it has been created, it will not trigger any view updates. We will discuss the reactivity system in detail later.
In addition to data properties, Vue instances expose a number of useful instance properties and methods. These properties and methods are prefixed with
$ to differentiate them from proxied data properties. For example:
Don’t use arrow functions on an instance property or callback (e.g.
vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context,
this will not be the Vue instance as you’d expect and
this.myMethod will be undefined.
Consult the API reference for the full list of instance properties and methods.
Each Vue instance goes through a series of initialization steps when it is created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it will also invoke some lifecycle hooks, which give us the opportunity to execute custom logic. For example, the
created hook is called after the instance is created:
There are also other hooks which will be called at different stages of the instance’s lifecycle, for example
destroyed. All lifecycle hooks are called with their
this context pointing to the Vue instance invoking it. You may have been wondering where the concept of “controllers” lives in the Vue world and the answer is: there are no controllers. Your custom logic for a component would be split among these lifecycle hooks.
Below is a diagram for the instance lifecycle. You don’t need to fully understand everything going on right now, but this diagram will be helpful in the future.