1. 데이터바인딩 - {{ }}- v-bind 2. 자바스크립트 표현식 3. 디렉티브 뷰 디렉티브란 html 태그 안에 v-접두사를 가지는모든 속성들을 의미v-if, v-for, v-show, v-bind, v-on, v-model 4. 이벤트 처리 v-on 디렉티브, methods 속성 확인 5. 고급 템플릿 기법 - computed 속성- watch 속성
하위에서 상위 컴포넌트로 이벤트 전달하기 이벤트를 발생시켜 (event emit) 상위 컴포넌트에 신호를 보냄상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출 - 이벤트 발생this.$emit('이벤트명'); - 이벤트 수신
상위에서 하위 컴포넌트로 데이터 전달하기 props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성props 속성을 사용하려면 먼저 하위 컴포넌트의 속성에 정의그런 다음 상위 컴포넌트의 html코드에 등록된 child-component 컴포넌트 태그에 v-bind 속성을 추가 v-bind 속성의 왼쪽 값으로 하위 컴포넌트에서 정의한 props 속성을 넣고, 오른쪽 값으로 하위 컴포넌트에 전달할 상위 컴포넌트의 data 속성을 지정
