반응형
[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에서만 사용 가능.
반응형
'WEB > Vue.js' 카테고리의 다른 글
[Vue.js] Vue에서 JQuery 사용하기 (0) | 2021.01.16 |
---|---|
[Vue.js] Custom Directive : Outside Click Event (0) | 2021.01.13 |
[Vuejs][VScode] 'v-slot' directive doesn't support any modifier. (0) | 2020.12.10 |
[Vuejs] v-html (0) | 2020.12.04 |
[Nuxtjs] 배포 할 때 console.log 한 번에 지우는 방법 (0) | 2020.08.20 |