[Vue] 02. Vue Instance

1. Vue Instance

Vue는 javascript기반이므로 <script></script>혹은 .js파일에 작성한다.

Vue Instance는 아래의 코드를 말한다.

new Vue({
    /*속성: 값*/
})

 

속성	설명
el	Vue가 적용될 element를 지정 (값 = CSS Selector | HTML 태그명)
data	Vue가 사용하는 정보 등록하는 곳으로, (1) 객체 형태와 (2) 함수 형태(권장)가 있다.
template	화면에 표현할 HTML, CSS등을 정의하는 속성
methods	화면 로직 제어(이벤트 처리 등)와 관련된 method 정의
lifecycle 속성 (beforeCreate, created, ..., destroyed)	Vue Instance의 생성 전, 생성 후, ... , 소멸 후에 실행할 로직 정의

 

[예시]

1) data 객체 형태

<h3 id="app">{{message}}</h3>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "hello Vue JS"
        },
    })
</script>

 

2) data 함수 형태(Vue Instance 정의 시, 권장)

<h3 id="app">{{message}}</h3>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                message: "hello Vue JS"
            }
        },
    })
</script>

 

 

 

2. Vue Instance가 적용되는 과정

1. Vue Instance 객체 생성(속성값도 load&초기화된 상태)

2. el 속성에 지정한 화면 요소에 인스턴스가 부착 

3. 인스턴스가 부착된 후, 해당 영역에 있는 화면 요소에 적용되어 값이 치환됨

 

따라서, Vue Instance가 유효한 범위는 el 속성에 지정한 화면 요소 이하의 요소들이 해당된다.

 

 

 

3. Vue Instance Life Cycle

life cycle 다이어그램은 공식 사이트를 참고하자.

https://kr.vuejs.org/v2/guide/instance.html

 

1. 생성 : new Vue() => beforeCreate => init => created

Vue 껍데기 생성 후, 속성 값 주입(초기화)

2. 부착 : el속성 & template 속성 해석 => beforeMount => el 속성에 지정된 요소에 부착 => mounted(연결!)

3. 갱신 : beforeUpdate => 데이터 변경으로 가상DOM re-render => updated(적용!)

4. 소멸 : destory()가 호출 => beforeDestory => resource들 없애고, 자기도 소멸 = destroyed

 

붉은 글씨로 표시한 단어는 Life Cycle Hook이라고 부르며, 위와 같이 특정 상황이 되면 자동 호출된다.

 

[예시]

<div id="app">
    <h3>카운트 {{count}}</h3>
    <button @click="count++">증가</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            count: 0,
        },
        beforeCreate() {
            console.log("beforeCreate 호출!");
        },
        created() {
            console.log("created 호출!");
            console.log("created count :"+this.count);
            console.log("created el : ", this.$el);
        },
        beforeMount() {
            console.log('beforeMount 호출!');
        },
        mounted() {
            console.log("mounted 호출!");
            console.log("mounted count :"+this.count);
            console.log("mounted el : ", this.$el);
        },
        updated() {
            console.log("updated 호출!");
        },
        destroyed() {
            console.log("destroyed 호출!");
        },
    })
</script>

 

결과