Vue 옵션

기본적인 옵션 구성

 

 

var app = new Vue({
	// 마운트할 요소
	el: '#app',
    // 애플리케이션에서 사용할 데이터
    data: {
    	message: 'Vue.js'
    },
    // 산출 속성
    computed: {
    	computedMessage: function() {
        	return this.message + '!'
        }
    },
    // 라이프 사이클 훅
    created: function() {
    
    }
    // 애플리케이션에서 사용할 메서드
    method: {
    	myMethod: function() {
        }
    }
})

 

 

 

el

 

• el에는 애플리케이션 인스턴스를 적용할 요소를 나타냄
• 선택자 형태로 지정

 

 

 

data - 데이터

 

• 객체 또는 배열로 지정

 

 

 

computed - 산출 속성

 

• data와 비슷하게 사용하는 '함수로 인해 산출되는 데이터'라고 볼 수 있음
• 이 데이터를 '산출 속성'이라고 부름

 

 

 

created - 라이프 사이클 훅

 

• created는 사이프 사이클 훅
• 인스턴스가 생성되고 리액티브 데이터가 초기화된 직후에 호출되며 DOM이 구축되지 않은 상태
• this(인스턴스 자신)에는 접근할 수 있지만 $el과 getElementBtId() 등을 사용한 DOM 접근은 불가함

 

---

 

• 라이프 사이클: Vue.js의 '기상'과 '취침'까지의 일정한 사이클을 나타냄
• Vue.js는 이렇게 라이프 사이클을 미리 등록해서 적절한 시기에 자동으로 호출함
• 훅(Hook): 이러한 시점을 낚아채서 원하는 처리를 할 수 있게 하는 것

 

 

 

method

 

• 애플리케이션에서 사용할 메서드
• 코드 간리가 쉽도록 처리를 나누거나, 이벤트 번들러 구현 등에 사용함

 

 

 

 

 

 

참고: 고양이도 할 수 있는 Vue.js