Directives

디렉티브(Directives)

• 디렉티브는 v- 접두사가 있는 특수 속성
• 디렉티브 속성 값은 단일 JavaScript 표현식이 된다. (v-for는 예외)
• 디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용

종류

• v-model : 양방향 바인딩 처리를 위해서 사용한다.
  - ex) form의 input, textarea
• v-bind : element의 속성과 바인딩 처리를 위해서 사용
  • 약어로 ":"로 사용가능
• v-show : 조건에 따라 element를 화면에 렌더링. style의 display를 변경
• v-if, v-else-if, v-else : 조건에 따라 element를 화면에 렌더링
• v-for : 배열이나 객체의 반복에 사용한다.
• v-cloak : Vue 인스턴스가 준비될 때까지 mustache 바인딩을 숨기는데 사용한다. CSS 규칙과 함께 사용. Vue 인스턴스가 준비되면 v-cloak는 제거된다.

v-show VS v-if의 차이점

	v-if	v-show
렌더링	false일 경우 X	항상 O
false일 경우	element 삭제	display:none 적용
template 지원	O	X
v-else 지원	O	X

template

• 여러 개의 태그들을 묶어서 처리해야 할 경우 사용
• v-if, v-for, component등과 함께 많이 사용

Vue method

• Vue Instance는 생성과 관련된 data및 method의 정의 가능
• method안에서 data를 "this.데이터이름"으로 접근이 가능