Vue js 디렉티브 예제

디렉티브

디렉티브는 v- 접두사가 있는 특수 속성입니다. 디렉티브 속성 값은 단일 JavaScript 표현식 이 됩니다. (나중에 설명할 v-for는 예외입니다.) 디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는 것 입니다. 아래 예제에서 살펴보겠습니다.

<p v-if="seen">이제 나를 볼 수 있어요</p>

여기서, v-if 디렉티브는 seen 표현의 진실성에 기반하여 <p> 엘리먼트를 제거 또는 삽입합니다.

전달인자

일부 디렉티브는 콜론으로 표시되는 “전달인자”를 사용할 수 있습니다. 예를 들어, v-bind 디렉티브는 반응적으로 HTML 속성을 갱신하는데 사용됩니다.

<a v-bind:href="url"> ... </a>

여기서 href는 전달인자로, 엘리먼트의 href 속성을 표현식 url의 값에 바인드하는 v-bind 디렉티브에게 알려줍니다.

또 다른 예로 DOM 이벤트를 수신하는 v-on 디렉티브입니다.

<a v-on:click="doSomething"> ... </a>

전달인자는 이벤트를 받을 이름입니다. 우리는 이벤트 핸들링에 대해 더 자세하게 살펴 볼 것입니다.

동적 전달인자

2.6.0+ 에서 추가됨

2.6.0버전부터 Javascript 표현식을 대괄호로 묶어 디렉티브 의 아규멘트로 사용하는것도 가능해졌습니다:

<!--
동적 전달인자는 "동적 전달인자의 형식 제약"의 부분에서 후술되는바와 같이,
조금의 제약이 있는 점에 주의해주세요
-->
<a v-bind:[attributeName]="url"> ... </a>

여기서 attributeName은 Javascript형식으로 동적 변환되어, 그 변환결과가 전달인자의 최종적인 밸류로 사용됩니다. 예를들어 당신의 Vue 인스턴스에 "href"라는 값을 가진 attributeName 데이터 속성을 가진 경우, 이 바인딩은 v-bind:href와 동등합니다.

이와 유사하게, 동적인 이벤트명에 핸들러를 바인딩 할 때 동적 전달인자를 활용할 수 있습니다.

<a v-on:[eventName]="doSomething"> ... </a>

이 예시에서 eventName의 값이 "focus" 라고 한다면 v-on:[EventName]은 v-on:focus와 동등합니다.

동적 전달인자 값의 제약

동적 전달인자는, null을 제외하고는 string으로 변환될 것으로 예상합니다. 특수 값인 null은 명시적으로 바인딩을 제거하는데 사용됩니다. 그 외의 경우, string이 아닌 값은 경고를 출력합니다.

동적 전달인자 형식의 제약

동적 전달인자의 형식에는 문자상의 제약이 있습니다. 스페이스와 따옴표같은 몇몇 문자는 HTML의 속성명으로서 적합하지 않은 문자이기 때문입니다. 다음 예시는 잘못된 경우입니다:

<!-- 컴파일러 경고를 불러옵니다 -->
<a v-bind:['foo' + bar]="value"> ... </a>

이를 피하는 방법은, 스페이스나 따옴표를 포함하지 않는 형식을 사용하거나, 복잡한 표현식을 계산된 속성(Computed)으로 대체하는 것입니다.

in-DOM 탬플릿을 사용할 때에는 (탬플릿이 HTML파일에 직접 쓰여진 경우), 브라우저가 모든 속성명을 소문자로 만드는 관계로 대문자의 사용을 피하는것이 좋습니다:

<!--
in-DOM 탬플릿에서는 이 부분이 v-bind:[someattr]로 변환됩니다.
인스턴스에 "someattr"속성이 없는 경우, 이 코드는 동작하지 않습니다.
-->
<a v-bind:[someAttr]="value"> ... </a>

수식어

수식어는 점으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다. 예를 들어, .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에게 알려줍니다.

<form v-on:submit.prevent="onSubmit"> ... </form>

나중에 [v-on](https://vuejs.org/v2/guide/events.html#Event-Modifiers)과 [v-model](https://vuejs.org/v2/guide/forms.html#Modifiers)을 더 자세히 살펴볼 때 수식어를 더 많이 사용할 것 입니다.

약어

v- 접두사는 템플릿의 Vue 특정 속성을 식별하기 위한 시각적인 신호 역할을 합니다. 이 기능은 Vue.js를 사용하여 기존의 마크업에 동적인 동작을 적용할 때 유용하지만 일부 자주 사용되는 디렉티브에 대해 너무 장황하다고 느껴질 수 있습니다. 동시에 Vue.js가 모든 템플릿을 관리하는 SPA를 만들 때 v- 접두어의 필요성이 떨어집니다. 따라서 가장 자주 사용되는 두개의 디렉티브인 v-bind와 v-on에 대해 특별한 약어를 제공합니다.

[v-bind 약어](https://kr.vuejs.org/v2/guide/syntax.html#v-bind-%EC%95%BD%EC%96%B4)

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>

[v-on 약어](https://kr.vuejs.org/v2/guide/syntax.html#v-on-%EC%95%BD%EC%96%B4)

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

이들은 일반적인 HTML과 조금 다르게 보일 수 있습니다. 하지만 :와 @는 속성 이름에 유효한 문자이며 Vue.js를 지원하는 모든 브라우저는 올바르게 구문 분석을 할 수 있습니다. 또한 최종 렌더링 된 마크업에는 나타나지 않습니다. 약어는 완전히 선택사항이지만 나중에 익숙해지면 편할 것 입니다.

참고

https://kr.vuejs.org/v2/guide/syntax.html#보간법-Interpolation