컨텐츠 내 위젯


사용자 지정 디렉티브 Vue

vue 에서는 속성에다가 대표적으로 v-bind, v-show 등을 통해 템플릿 문법 처럼 동작할 수 있도록 하는게 있다. 이걸 앵귤러와 똑같이 디렉티브라고 한다. 작성방법은 EACD(?) 이렇게 네 가지가 있던 것과는 다르게 오직 어트리뷰트로만 가능하며, 등록하는 방법은 다음과 같다.

전역으로 등록하고 싶을 때

1
2
3
4
5
6
7
8
// 전역 사용자 정의 디렉티브 v-focus 등록
Vue.directive('focus', {
// 바인딩 된 엘리먼트가 DOM에 삽입되었을 때...
inserted: function (el) {
// 엘리먼트에 포커스를 줍니다
el.focus()
}
})


지역으로 등록하고 싶을 때

1
2
3
4
5
6
7
8
directives: {
focus: {
// 디렉티브 정의
inserted: function (el) {
el.focus()
}
}
}


시점에 따라 자동 실행되는 훅 함수 또한 존재한다.

1. bind: 디렉티브가 처음 엘리먼트에 들어가 있을 때.
2. inserted: 가상돔을 벗어나 부모에 직접 삽입 되었을 때. (근데 이게 딱 tree상에 걸쳤다는거지 렌더링이 완료된건 아님)
3. update: 컴포넌트의 가상돔이 업데이트 되었을때 (자식의 내용이 전부 완벽하게 바뀐게 아닐 수 도 있음)
4. componentUpdated: 업데이트된게 렌더링까지 다 되고 그 자식들따기 완벽하게 되었을 때
5. unbind: 삭제 된 이후 한번 콜백.

위의 훅 함수의 전달인자는 다음과 같다.

인자 내용
el 엘리먼트..뭐 그냥 항상 쓰는거와 같음
binding 하단 속성들이 세부 프로퍼티로 들어감
name 디렉티브 이름 기본적으로 v-** 으로 들어가는거
value v-example="**" 으로 들어가는거
oldValue 변경전 값
expression value의 내용이 일종의 표현식이면 그걸 문자열로 보여줌 ex) v-example="10/5"
arg 추가 전달인자 ex)v-example:**
modifiers arg 옆에 붙는 장식자 존재 여부에 따라 boolean으로 들어감 ex)v-example:ex.apple.banana {apple:true, banana: true}
vnode 가상돔에 달린 노드
oldVnode 변경 전 가상돔에 달린 노드





덧글

댓글 입력 영역