👏정리를 시작하며..

인턴 업무를 위한 Vue.js 공부를 시작하기로 했다 !

오늘 ice breaking 겸 하루동안 조금 살펴봤는데 계속 사용하는 만큼 아무래도 정리를 해두는게 좋을거 같아서 조금씩 정리해두려고 한다 :)

Vue.js 기초 익히기 기본 강좌를 참조할 예정이다.

<www.youtube.com/watch?v=gZBKGn0wQXU&list=PLB7CpjPWqHOtYP7P_0Ls9XNed0NLvmkAh>

Vue

• 프로그레시브 프레임워크 : Vue를 점진적으로 채택할 수 있음. 때문에 기존 프로젝트를 Vue 로 전환하고싶은 경우 다른 프레임워크처럼 처음부터 새로 만드는게 아닌 부분부분 Vue 로 바꿔가면서 전환할 수 있다.

Vue 인스턴스

생성된 Vue 오브젝트 하나를 말함

var vm = new Vue({
		//옵션
})
new Vue({
   el: '#app',
   
   template: '',
   
   data: {},
   
   props: [], // {}
   
   methods: {},
   
   computed: {},
   
   watch: {}
});

Vue 인스턴스의 property

✅el ( string | HTMLElement )
대상이 되는 html element 또는 css selector ( vm.el)

✅template(string)
Vue 인스턴스의 마크업으로 사용할 문자열 템플릿

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

✅props ( Array | 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 인스턴스에 데이터가 변경되는 시점에 호출