Vue.js 디렉티브

1. 의미

: v- 접두사가 있는 특수 속성

: 속성값은 v-for를 제외하고 단일 JavaScript 표현식이 됨

: 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용

 

v-text	v-bind	v-else
v-html	v-show	v-for
v-once	v-if	v-cloak
v-model	v-else-if	v-on

 

① v-model : 양방향 바인딩 처리

② v-bind : 엘리먼트의 속성과 바인딩

③ v-show : 조건에 따라 엘리먼트를 화면에 렌더링 / style의 display를 변경

④ v-if / v-else-if / v-else : 조건에 따라 엘리먼트를 화면에 렌더링

⑤ v-for : 배열이나 객체의 반복에 사용 / v-for="변수이름 in 배열" / v-for="(변수이름, 인덱스) in 배열"

⑥ template : 여러 개의 태그들을 묶어서 처리해야 할 경우 사용

⑦ v-cloak : 뷰 인스턴스가 준비될 때까지 mustache 바인딩을 숨기는데 사용 / [v-cloak] { display:none }과 같은 CSS 규칙과 함께 사용 / 뷰 인스턴스가 준비되면 v-cloak은 제거

 

 

※ v-show 와 v-if 차이점

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