[Vue.js][기본 문법 ] 2. Directive

▶ Directive 

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

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

 

Directive 전체 구문

---

 

▶ Directive "Arguments"

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

아래 예시의 href는 HTML <a> 요소의 href 속성의 값을 myUrl 값에 바인딩하도록 하는 v-bind의 인자이다

아래 예시의 click은 이벤트를 수신할 이벤트 이름을 작성하는 v-on의 인자이다

 

▶ Directive "Modifiers"

" . (dot)"으로 표시되는 특수 접미사  directive가 특별한 방식으로 연결되어야 함을 나타낸다

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

 

▶ Built-in Directives

v-text v-show v-if v-for  * 참고 https://vuejs.org/api/built-in-directives