[Vue] Directive

# Directive란?

'v-' 접두사가 있는 특수 속성

 

• Directive의 속성 값은 단일 JavaScript 표현식이어야 함(v-for, v-on은 제외)
• 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용

<p v-if="seen">v-if가 true면 출력됨</p>

 

 

 

# Directive의 구조

 

🔹 Arguments

일부 directive는 directive 뒤에 콜론(:)으로 표시되는 인자를 사용할 수 있음

<a v-bind:href="myUrl">Link</a>

 

▶  위의 코드에서 href는 HTML a 요소의 href 속성 값을 myUrl 값에 바인딩 해주는 v-bind의 인자

 

<button v-on:click="doSomething">Button</button>

▶ click은 수신할 이벤트 이름을 작성하는 v-on의 인자

 

 

 

🔹 Modifiers

.(dot)으로 표시되는 특수 접미사로, directive가 특별한 방식으로 바인딩되어야 함을 나타냄

<form @submit.prevent="onSubmit">
  <input type="submit">
</form>

▶ .prevent는 발생한 이벤트에서 event.preventDefault()를 호출하도록 v-on에 지시하는 modifier

 

 

 

• Directive의 구조: 공식문서 참고
• 다른 built in directive: 공식 API 문서 - built-ins 항목 참고