[Vue.js] Vue 디렉티브(Directive)란?

디렉티브(Directive)

디렉티브는 v- 접두사가 있는 특수 속성이다.

디렉티브 속성 값은 단일 JavaScript 표현식이 된다. (v-for는 예외)

디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용한다.

 

template

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

v-text
자바스크립트의 innerText와 같은 역할을 한다. html 태그가 적용되지 않고 문자열이 그대로 보여진다.

v-bind
엘리먼트의 속성과 바인딩 처리를 위해서 사용한다. 약어로 ":"로 사용이 가능하다.

v-html
자바스크립트의 innerHTML과 같은 역할을 한다. html 태그가 적용된 화면이 보여진다.
이중 중괄호(mustaches)는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용한다.

v-show
조건에 따라 엘리먼트를 화면에 렌더링 한다. style의 display를 변경한다.

v-for
배열이나 객체의 반복에 사용된다. 사용법은 v-for="요소변수이름 in 배열"이나 v-for="(요소변수이름, 인덱스) in 배열" 같은 방법으로 사용할 수 있다.

v-once
데이터 변경 시 업데이트되지 않는 일회성 보간을 수행한다.

v-cloak
Vue Instance가 준비될 때까지 mustache바인딩을 숨기는 데 사용한다. [v-cloak] {dispaly: none}과 같은 CSS 규칙과 함께 사용한다. Vue Instance가 준비되면 v-cloak은 제거된다.

v-model
양방향 바인딩 처리를 위해서 사용한다. (form의 input이나 textarea)

v-if, v-else-if, v-else
조건에 따라 엘리먼트를 화면에 렌더링 한다.

v-on
DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다.

 

v-show와 v-if의 차이점
v-if는 false일 경우 렌더링 자체가 되지 않고 v-show는 항상 렌더링 된다.
v-if는 false일 경우 엘리먼트를 삭제해버리고 v-show는 display:none이 적용된다.
v-if는 template와 v-else를 지원하지만 v-show는 지원하지 않는다.