Vue.js
사용자 지정 지시문
수색…
통사론
-
Vue.directive(id, definition);
-
Vue.directive(id, update); //when you need only the update function.
매개 변수
매개 변수 | 세부 |
---|---|
id | String - v- 접두어없이 사용되는 지시문 ID입니다. (사용할 때 v- 접두어 추가) |
definition | 객체 - 정의 객체는 여러 가지 훅 함수 (모두 선택적 임)를 제공 할 수 있습니다 : bind , update 및 unbind |
기초
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"
})