Vue.js
사용자 지정 지시문

통사론

• Vue.directive(id, definition);
• Vue.directive(id, update); //when you need only the update function.

매개 변수

기초

Vue.js는 코어에서 제공되는 기본 지시문 세트 외에도 사용자 정의 지시문을 등록 할 수있게 해줍니다. 사용자 지정 지시문은 데이터 변경을 임의의 DOM 동작에 매핑하는 메커니즘을 제공합니다.

Vue.directive(id, definition) 메소드로 글로벌 사용자 정의 지시문을 등록하고 지시문 ID 뒤에 정의 오브젝트를 전달할 수 있습니다. 구성 요소의 directives 옵션에 포함하여 로컬 사용자 지정 지정 문을 등록 할 수도 있습니다.

후크 기능

• bind : 지시어가 처음 요소에 바인딩 될 때 한 번만 호출됩니다.
• update : 초기 값으로 bind 직후 처음으로 호출 된 다음 바인딩 값이 변경 될 때마다 다시 호출됩니다. 새 값과 이전 값이 인수로 제공됩니다.
• unbind : 지시어가 요소로부터 언 바인딩 된 경우 한 번만 호출됩니다.

Vue.directive('my-directive', {
     bind: function () {
       // do preparation work
       // e.g. add event listeners or expensive stuff
       // that needs to be run only once
     },
     update: function (newValue, oldValue) {
       // do something based on the updated value
       // this will also be called for the initial value
     },
     unbind: function () {
       // do clean up work
       // e.g. remove event listeners added in bind()
     }    
})

일단 등록이되면 Vue.js 템플릿에서 사용할 수 있습니다 ( v- 접두사를 추가해야 함) :

<div v-my-directive="someValue"></div>

update 함수 만 필요할 때 정의 객체 대신 단일 함수를 전달할 수 있습니다.

Vue.directive('my-directive', function (value) {
  // this function will be used as update()
})

지시어 인스턴스 속성

모든 후크 함수는 실제 지시문 객체에 복사되며이 지시문 객체에서이 함수 내 this 컨텍스트로 액세스 할 수 있습니다. 지시어 객체는 몇 가지 유용한 속성을 제공합니다.

• el : 지시어가 바인딩되는 요소.
• VM :이 지시어를 소유하고있는 컨텍스트 ViewModel.
• expression : 인수와 필터를 제외하고 바인딩의 표현식.
• arg : 인수가있는 경우 그 인수.
• name : 접두어가없는 지시어의 이름.
• 수식어 :있는 경우에 수식자를 포함한 객체
• descriptor : 전체 지시어의 파싱 결과를 담고있는 객체.
• params : param 속성을 포함한 객체. 아래에 설명했다.

이러한 모든 속성을 읽기 전용으로 취급하고 수정하지 마십시오. 사용자 정의 속성을 지시문 객체에도 첨부 할 수 있지만 실수로 기존 내부 객체를 덮어 쓰지 않도록주의하십시오.

다음 특성 중 일부를 사용하는 사용자 정의 지정 문 예 :

HTML

<div id="demo" v-demo:hello.a.b="msg"></div>

자바 스크립트

Vue.directive('demo', {
  bind: function () {
    console.log('demo bound!')
  },
  update: function (value) {
    this.el.innerHTML =
      'name - '       + this.name + '<br>' +
      'expression - ' + this.expression + '<br>' +
      'argument - '   + this.arg + '<br>' +
      'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
      'value - '      + value
  }
})
var demo = new Vue({
  el: '#demo',
  data: {
    msg: 'hello!'
  }
})

결과

name - demo
expression - msg
argument - hello
modifiers - {"b":true,"a":true}
value - hello!

객체 리터럴

지시문에 여러 값이 필요한 경우 JavaScript 객체 리터럴을 전달할 수도 있습니다. 지시어는 유효한 자바 스크립트 표현식을 사용할 수 있습니다.

HTML

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

자바 스크립트

Vue.directive('demo', function (value) {
  console.log(value.color) // "white"
  console.log(value.text) // "hello!"
})

리터럴 수정 자

지시문이 리터럴 수정 자와 함께 사용되면 속성 값은 일반 문자열로 해석되어 update 메소드에 직접 전달됩니다. 일반 문자열은 반응 할 수 없으므로 update 메서드는 한 번만 호출됩니다.

HTML

<div v-demo.literal="foo bar baz">

자바 스크립트

Vue.directive('demo', function (value) {
  console.log(value) // "foo bar baz"
})