Vue.js Directive

디렉티브

v- 접두사가 있는 속성, v-html, v-bind를 포함해 빌트인 디렉티브를 제공한다.

v-for, v-on, v-slot을 제외하고는 단일 js표현식이어야한다.
디렉티브 역할은 표현식 값이 변경시 Dom에 반응적 업데이트를 적용하는 것이다.
예)

<p v-if='seen'>이제 이것을 볼 수 있다.</p>

여기서 v-if는 seen을 기반으로 p엘리먼트를 나타내거나 없애거나 한다.

인자

일부 디렉티브는 뒤에 :을 표시되는 인자를 사용한다. v-bind디렉티브는 html속성을 반응적으로 업데이트하는데 사용한다.

<a v-bind:href='url'> ... </a>
<!-- 단축문법 -->
<a :href='url'> ... </a>

위에서 href는 v-bind의 인자로, 엘리먼트 속성인 href에 url을 바인딩한 것이다
또 다른 v-on을 예로 들면

<a v-on:click='dosomething'>... </a>

<!-- 단축 -->
<a @click='dosomething'>... </a>

위 click의 인자는 수신 할 이벤트 이릅니다.
v-on은 @로 단축문법 사용할 수 있다.