basic syntax of vue.js

vue instance

• new Vue({})
• 안에 중괄호는 options라는 객체임
• vue instance === vue component

options/dom - 'el' //options 안에 들어갈 수 있는 요소

• vue 인스턴스에 연결(마운트) 할 기존 dom 요소가 필요
• new를 이용한 인스턴스 생성 때만 사용

options/data - 'data'

• vue 인스턴스의 데이터 객체
• vue 인스턴스의 상태 데이터를 정의하는 곳
• vue template에서 interpolation을 통해 접근 가능
• v-bind, v-on과 같은 directive에서도 사용 가능
• vue 객체 내 다른 함수에서 this 키워드를 통해 접근 가능

options/data - 'methods'

• vue 인스턴스에 추가할 메서드
• vue template에서 interpolation을 통해 접근 가능
• v-on과 같은 directive에서도 사용가능
• vue 객체 내 다른 함수에서 this 키워드를 통해 접근가능
• 화살표 함수를 메서드를 정의하는데 사용하면 안됨 //this때문!

'this'

• vue 함수 객체 내에서 vue 인스턴스를 가리킴

options/data - 'computed'

• 데이터를 기반으로 하는 계산된 속성
• 함수의 형태로 정의하지만 함수가 아닌 함수의 반환 값이 바인딩 됨
• 종속된 데이터에 따라 저장(캐싱)됨
• ☆종속된 데이터가 변경될 대만 함수를 실행
• 즉, 어떤 데이터에도 의존하지 않는 computed 속성의 경우 절대로 업데이트되지 않음
• 반드시 반환값이 있어야 함

//ex)

const app = new Vue({
	el: '#app',
	data: {
		a: 1,
	},
	method: {
		myFunc: function () {
			console.log(this)
		}
	},
    computed: {
        
    }
})