티스토리 뷰

Basic_Studies/Vue.js & Nuxt.js

[Vue.js] 공식문서 요약 : 인스턴스

adore_voy 2021. 4. 30. 15:34

디렉티브: 뷰 의 화면 요소를 더 쉽게 조작하기 위해 v- 라는 접두어가 붙은 명령어들

el: 뷰 인스턴스의 범위 지정 / 인스턴스가 그려지는 화면의 시작점

v-on: 이벤트 리스너를 추가하기 위함. 사용자 입력 핸들러. 이를 이용하면 직접적으로 돔을 건드리지 않고 앱의 상태만 업데이트함.

해당 html 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용함.

v-bind: 

<body>
	<div id="app">
		<img id="img" v-bind:src="smile"/>
	</div>
</body>
var app = new Vue({
el: '#app',
data: {
name: 'Vue',
smile: 'https://t1.daumcdn.net/cfile/blog/2119cf4157f6360d2f'
}
});

: 라고만 입력해도 가능.

 

v-model: 입력, 앱 상태 양방향 바인딩. v-bind, v-on의 조합으로 동작. 두 요소를 한번에 이용하는 것 이기 때문에 편할 수 있으나,

한국어, 일본어, 중국어 등을 입력할 때 한 글자씩 늦게 타이핑 되곤 함.

 

컴포넌트 사용하기

 

Vue.component('todo-item', {
template: '<li>this is what you should do</li>'
})

var app = new Vue(...)
<ol>
	<todo-item></todo-item>
</ol>

 

props를 전달 받는 컴포넌트

 

 

 

Vue 인스턴스란?

 

new Vue() 를 통해 생성.

 

 

데이터와 메소드

 

인스턴스가 생성될 때 모든 속성이 뷰의 반응형 시스템에 추가됨

각 속성값이 변경될 때 뷰가 반응하여 새로운 값과 일치하도록 업데이트됨.

 

데이터가 변경되면 화면 재렌더링.

data에 있는 속성들은 인스턴스가 생성될 때 존재 한 것들만 반응형임.

 

 

인스턴스 라이프사이클 훅

 

 

 

 

beforeCreate:

인스턴스가 생성된 후 가장 처음으로 실행되는 라이프 사이클 단계.

data와 methods 속성이 아직 인스턴스에 없음. 

돔과 같은 화면 요소에도 접근 불가능.

 

created:

data 값에 접근할 수 있다.

data와 methods 에 접근 가능한 첫 라이프 사이클 단계.

컴포넌트가 생성된 후 실행되기에 서버에 데이터를 요청해서 받아오는 로직을 수행하곤 함.

 

beforeMount:

el 속성에 지정한 DOM에 인스턴스를 부착하기 전에 호출됨.

render 함수가 호출되기 직전의 로직을 추가하기 좋음.

 

mounted:

el 속성에서 지정한 돔에 인스턴스가 부착되고 나면 호출됨.

template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋음.

돔에 인스턴스가 부착되자마자 바로 호출돼서 외부 라이브러리나 하위 컴포넌트에 의해 추가된 화면 요소가 최종 HTML코드로 변환되는 시점과 다를 수 있다.

 

beforeUpdate:

변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다.

 

updated:

데이터 변경 후 가상돔으로 다시 화면을 그리고 나면 실행되는 단계.

데이터 변경 후 화면 요소 제어와 관련한 로직을 추가하기 좋음.

여기서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 computed, watch와 같은 속성을 이용해야함.

 

데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate, 변경 데이터의 화면 요소와 관련한 로직은 updated에 넣는다.

 

beforeDestroy:

뷰 인스턴스 파괴 직전에 호출. 아직 인스턴스 접근은 가능.

여기서 뷰 인스턴스의 데이터를 삭제하기 좋음.

 

destroyed:

뷰 인스턴스 파괴 후 호출됨. 

정의한 모든 속성 제거. 하위 인스턴스들 또한 모두 파괴.

반응형

'Basic_Studies > Vue.js & Nuxt.js' 카테고리의 다른 글

[Nuxt.js] 공식문서 번역하기 (Server Side Rendering)  (0) 2021.05.25
[Nuxt.js] 공식문서 번역하기(Context and Helpers)  (0) 2021.05.23
[Nuxt.js] 공식 문서 번역하기(Concepts)  (0) 2021.05.23
[Nuxt.js] 공식 문서 번역하기(폴더 구조 중심)  (0) 2021.05.20
[Vue.js] 공식 문서 : 템플릿 문법  (0) 2021.04.30
댓글