[Vue.js] Custom Directive

[Vue.js] Custom Directive

 

 

| 본 글은, Vue.js Guide 문서를 읽고 정리한 내용입니다.

 

 

1. 선언

전역

// main.js
Vue.directive('[디렉티브_이름]', { ... });

지역

export default { ... directives: { '[디렉티브_이름]': { ... } } }

사용방법

// 예)
<input v-[디렉티브_이름] />

 

---

2. Hook(훅) 함수

bind

처음 엘리먼트에 바인딩 될 때 한 번만 호출

insert

바인딩 된 엘리먼트가 부모 노드에 삽입 되었을 때 호출

update

포함하고 있는 컴포넌트가 업데이트 된 후 호출.

자식이 업데이트 되기 전일 가능성이 있음.

componentUpdated

포함하고 있는 컴포넌트와 자식들이 업데이트 된 후 호출

unbind

디렉티브가 엘리먼트로부터 언바인딩된 경우 한 번만 호출

---

3. Hook(훅) 전달인자

모든 전달 인자는 읽기 전용으로 사용해야한다. 절대 변경X

el

디렉티브가 바인딩된 엘리먼트

DOM조작 가능

binding

• name: 디렉티브 이름. v-프리픽스 없음

• value: 디렉티브에서 전달받은 값.

  예) v-my-directive="1 + 1" ⇒ 2

• oldValue: 이전 값. update와 componentUpdated에서만 사용 가능.

• expression: 표현식 문자열.

  예) v-my-directive="1 + 1" ⇒ "1 + 1"

• arg: 디렉티브 전달 인자. 있는 경우에만 존재

  예) v-my-directive:foo ⇒ "foo"

• modifiers: 포함된 수식어 객체. 있는 경우에만 존재

  예) v-my-directive.foo.bar ⇒ { foo: true, bar: true }

vnode

Vue 컴파일러가 만든 버추얼 노드

oldVnode

이전 버추얼 노드.

update와 componentUpdated에서만 사용 가능.

 

 

 

 

 

---

[참고] kr.vuejs.org/v2/guide/custom-directive.html