사용자 정의 디렉티브

사용자 정의 디렉티브

https://ryuzuka.github.io/VUE/tutorial/14_customDirective.html

• 사용자 정의 디렉티브

- 기본 디렉티브 (v-model, v-show 등..) 외에도 사용자가 직접 정의한 디렉티브를 등록 가능

<div id="app">

<input v-border>

<input v-focus>

</div>

<script>

Vue.directive( 'border', { // 전역

inserted: function ( el ) {

el.style.border = '1px solid red'

}

});

new Vue({

el: '#app',

directives: { // 로컬

'focus': {

inserted ( el ) {

el.focus();

}

}

}

});

</script>

• javascript hook

bind : 디렉티브가 처음 엘리먼트에 바인딩 될 때 한번만 호출

inserted : 바인딩 된 엘리먼트가 DOM에 삽입 되었을 때 호출

update : 해당 컴포넌트가 업데이트 된 후 호출. ( 자식이 업데이트 되기 전일 가능성이 있다. ) 

componentUpdate : 포함하고 있는 컴포넌트와 하위 컴포넌트들이 업데이트 된 후에 호출

unbind : 디렉티브가 엘리먼트로부터 바인딩이 해제될 때 호출

• <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
• 
  
• Vue.directive('demo', {

  bind: function (el, binding, vnode) {

  var s = JSON.stringify

  el.innerHTML =

  'name: ' + s(binding.name) + '<br>' +

  'value: ' + s(binding.value) + '<br>' +

  'expression: ' + s(binding.expression) + '<br>' +

  'argument: ' + s(binding.arg) + '<br>' +

  'modifiers: ' + s(binding.modifiers) + '<br>' +

  'vnode keys: ' + Object.keys(vnode).join(', ')

  }

  });

  
  

  new Vue({

  el: '#hook-arguments-example',

  data: {

  message: 'hello!'

  }

  });
• * 디렉티브 훅의 모든 전달인자는 readonly로 사용해야 한다.

• el: 디렉티브가 바인딩된 엘리먼트. 이 것을 사용하면 DOM 조작을 할 수 있습니다.
• binding: 아래의 속성을 가진 객체입니다.
  • name: 디렉티브 이름, v- 프리픽스가 없습니다.
  • value: 디렉티브에서 전달받은 값. 예를 들어 v-my-directive="1 + 1"인 경우 value는 2 입니다.
  • oldValue: 이전 값. update와 componentUdated에서만 사용할 수 있습니다. 이를 통해 값이 변경되었는지 확인할 수 있습니다.
  • 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 컴파일러가 만든 버추얼 노드. VNode API에 전체 설명이 있습니다.
• oldVnode: 이전의 버추얼 노드. update와 componentUdated에서만 사용할 수 있습니다.