[ Vue.js 2 프로그래밍 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=12320270)

3. 디렉티브

디렉티브는 다이브러리에서 DOM엘리먼트가 무언가를 수행하도로 지시하는 특수한 토큰으로 vue.js에서는 디렉티브의 개념이 Angular에서보다 훨씬 더 간단합니다.

디렉티브의 예

v-show: 조건에 따라 엘리먼트를 화면에 표시
v-if: v-show 대신 사용할 수 있음
v-else: v-if의 평가 결과가 거짓이면 엘리먼트를 표시
v-for: 배열 안의 항목을 출력

3.1 v-show

v-show는 조건에 따라 엘리먼트를 화면에 표시하는 디렉티브로 표시하지 않는 경우 sytle의 display:none을 추가하여 dom은 유지한테 화면에서 숨깁니다.

3.2 v-if

v-if 역시 v-show와 마찬가지로 조건에 따라 화면에 표시하는 디렉티브지만 v-if를 통해 숨겨진 엘리먼트는 DOM유지 되지 않으며

3.2.1 v-if 템플릿

여러 개의 엘리먼트를 한 번에 토글해야 하는 경우

3.3 v-else

v-if를 사용하는 경우 v-else디렉티브를 활용하여 else 블록을 지정할 수 있습니다. 이때 v-else 디렉티브는 v-if 다음에 나와야하며 그렇제 하지 않으면 인식되지 않습니다.

3.4 v-if VS v-show

v-show를 사용할 경우 페이지 랜더링 중에 더 맣은 로드 시간이 발생 합니다.(dom은 로드하고 style을 통해 숨기게 되므로) 이와 반대로 v-if는 조건에 맞춰 랜더링을 하게 됩니다.

v-if를 사용할 경우 초기 랜더링에서 조건이 true가 될 때까지 실제로 랜더링하지 않으므로 v-if는 토글 비용이 높고 v-show는 초기 랜더링 비용이 높습니다. 따라서 무언가를 매우 자주 토글해야하는 경우 v-show를 사용하고 런타임에 조건이 자주 변경될 가능성이 낮은 경우에는 v-if를 사용해야 합니다.

요약

디렉티브

v-show, v-if는 조건에 따라 보여주거나 숨겨주는 기능을 하는 디렉티브

v-show는 display:none을 활용하여 숨기며, v-if는 엘리먼트 자체를 랜더링하지 않는 형태로 숨김
(그러므로 사용목적에 맞춰 명확하게 사용하는 것이 좋음)

template 엘리먼트는 여러 개의 엘리먼트를 한번에 토글해야하는 경우 사용할 수 있으며 상황에 따라 보이지 않는 wrapper로 사용할 수 있음, v-show 디렉티브와 함께 사용할 수 없다는 점에 유의

v-else는 v-if와 함께 사용되어 else블록을 지정할 수 있으며 v-if다음에 나와야만 인식 됨

(vue.js) - 03 디렉티브