[Vue.js] 사용자 정의 디렉티브

사용자 정의 디렉티브

vue 에서는 v-model이나 v-show와 같은 디렉티브 외에도 사용자 정의 디렉티브를 등록해서 사용할 수 있습니다. 어떤 로직이 중복해서 사용된다면 그 로직에 대해 디렉티브로 정의해서 코드의 중복을 줄일 수 있는 효과가 있습니다.

directive 등록

디렉티브를 전역, 로컬 2가지로 등록할 수 있습니다.

//전역 main.js
Vue.directive('focus', {
    inserted : function(el){
    el.focus()
  }
})

//로컬 
directives: {
  //디렉티브 정의
  inserted: function(el){
    el.focus();
  }
}

위와 같이 등록을 한 후에 템플릿에서 아래와 같은 모든 태그에 attribute 추가해서 사용할 수 있습니다.

<input v-focus>

훅 함수

디렉티브는 여러가지 훅 함수를 제공합니다.

• bind : 처음 DOM 엘리먼트에 바인딩 될 때 한번만 호출됩니다. 일회성 설정을 할 수 있습니다.
• inserted : 바인딩된 엘리먼트가 부모 노드에 삽입 되었을 때 호출됩니다.
• update : 포함하는 컴포넌트가 업데이트 된 후 호출됩니다.
• coponentUpdated : 포함하고 있는 컴포넌트와 그 자식들이 업데이트 된 후에 호출됩니다.
• unbind : 디렉티브가 엘리먼트로부터 언바인딩된 경우에만 한번 호출됩니다.

훅 함수 전달인자

• el : 디렉티브가 바인딩된 엘리먼트
• binding : 아래의 속성을 가진 객체
  • name : 디렉티브 이름
  • value : 디렉티브에서 전달받은 값
  • oldValue : 이전 값 (update, componentUpdated에서만 사용 가능)
  • expression : 표현식 문자열
  • arg : 디렉티브의 전달인자, 있는 경우에만 존재
  • modifiers : 포함된 수식어 객체
• vnode : vue 컴파일러가 만든 가상 노드
• oldVnode : 이전의 가상 노드