Vue 인스턴스

Vue 인스턴스

https://ryuzuka.github.io/VUE/tutorial/01_instance.html

new Vue 인스턴스 생성. ( vm 관행적 코딩 컨벤션 )

Vue 인스턴스를 생성 할 때, data, method, props 등 옵션 객체를 전달

new Vue({

el: '#app',

template: '',

data: {},

props: [], // {}

methods: {},

computed: {},

watch: {}

});

el ( string | HTMLElement )

대상이 되는 html element 또는 css selector ( vm.$el )

template ( string )

Vue 인스턴스의 마크업으로 사용할 문자열 템플릿

data ( Object | Function )

화면을 그리는데 사용하는 data 를 반환하는 함수 또는 data 객체 ( vm.$data )

props ( Array<string> | Object )

부모 컴포넌트로부터 전달 받은 property들의 Array 혹은 Object

methods ( [key: string]: Function )

Vue 인스턴스에서 사용되는 메소드. this 컨텍스트를 Vue 인스턴스에 바인딩

computed ( [key: string]: Function | { get: Function, set: Function } )

계산된 속성. getter와 setter는 자동으로 this 컨텍스트를 Vue 인스턴스에 바인딩

watch ( [key: string]: string | Function | Object | Array )

감시된 속성. Vue 인스턴스에 데이터가 변경되는 시점에 호출

 options 속성이나 콜백에 created: () => console.log(this.a) 이나 vm.$watch('a', newValue => this.myMethod()) 와 같은 화살표 함수 사용을 지양하기 바랍니다. 화살표 함수들은 부모 컨텍스트에 바인딩되기 때문에, this 컨텍스트가 호출하는 Vue 인스턴스에서 사용할 경우 Uncaught TypeError: Cannot read property of undefined또는Uncaught TypeError: this.myMethod is not a function와 같은 오류가 발생하게 됩니다.