기록 블로그

인스턴스가 화면에 적용되는 과정

• 뷰 라이브러리 파일 로딩
• 인스턴스 객체 생성 (옵션 속성 포함)
• 특정 화면 요소에 인스턴스를 붙임
• 인스턴스 내용이 화면 요소로 변환
• 변화된 화면 요소를 사용자가 최종 확인

new Vue({
    el:'#app',
    data:{
        message: 'Hello Vue.js!'
    }
});

<div id ="app">
    {{message}}
</div>

• el 속성에 인스턴스가 부착되고 나면 인스턴스에 정의한 옵션 객체의 data이 el 속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환
• data 속성의 message 값 Hello Vue.j 가 {{message}} 와 치환

속성

computed

• 산출 속성으로 data 와 비슷하게 사용되는 함수로 인해 산출 되는 데이터

template

• 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성, 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음

methods

• 화면 로직 제어와 관계된 메서드를 정의하는 속성, 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가 할 수 있음

created

• 뷰 인스턴스가 생성되자마자 실행할 로직을 정의하는 속성
• DOM이 아직 구축되지 않은 상태로 인스턴스 자신을 나타내는 this에 접근할 수 있지만 $el 과 getElementById() 등을 이용해 DOM을 통해서는 접근 불가

속성에 데이터 바인딩 하기

• 속성에 전개 불가능

<input type="text" value="{{message}}">  
<!--ERROR--!>

• 속성에 데이터 바인딩 하는법

<input type="text" v-bind:value="message">
<!--생략 하는 방법 --!>
<input type="text" :value="message">

화면에 적용되는 과정

1. 뷰 라이브러리 파일 로딩
2. 인스턴스 객체 생성
3. 특정 화면 요소에 인스턴스를 붙임
4. 인스턴스 내용이 화면 요소로 변환
5. 변환된 화면 요소를 사용자가 최종 확인