[vue2] 디렉티브

개요

디렉티브는 뷰의 기능들을 사용하기 위한 속성으로, HTML 태그 안에 작성됩니다.

디렉티브

각 디렉티브에 대한 설명은 다음 링크를 참고하시기 바랍니다.
Directives

단축표기

v-bind 디렉티브는 :로 표기할 수 있습니다

<a v-bind:href="url"> ... </a>
<a :href="url"> ... </a> <!~- 1번 라인과 동일하게 동작합니다.-->

v-on 디렉티브는 @로 표기할 수 있습니다

<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a> <!~- 1번 라인과 동일하게 동작합니다.-->

v-if VS v-show

v-if와 v-show 디렉티브의 경우 어떠한 요소를 보여줄지 결정하는 데 사용됩니다.

v-if의 경우 조건이 true가 되기 전까지 렌더링되지 않으므로,

조건이 쉽게 변경되지 않는 경우에 유리합니다.

v-show의 경우 미리 렌더링은 되지만, 조건이 false일 경우 숨겨집니다.

때문에 조건이 자주 변경될 경우에 유리합니다.

v-show를 통해 너무 많은 요소들을 표현할 경우, 최초의 렌더링 속도에 영향을 줄 수 있으므로

각 컴포넌트들의 렌더링 비용과 전체 컴포넌트의 렌더링 비용, 조건이 변경되는 빈도에 대해

잘 고려하여 v-if와 v-show 중 어떤 디렉티브를 사용할지 결정해야 합니다.