베이스
내장 지시문 외에도 Vue.js는 사용자 정의 지시문을 등록 할 수 있습니다. 사용자 정의 지시문은 데이터의 변경 사항을 DOM 동작에 매핑하는 메커니즘을 제공합니다.
글로벌 사용자 정의 지시문은 vue.directive (ID, 정의) 메소드를 사용하여 등록 할 수 있으며, 이는 두 개의 매개 변수 명령 ID와 정의 객체를 수신합니다. 구성 요소의 지침 옵션을 사용하여 로컬 사용자 정의 지시문을 등록 할 수도 있습니다.
후크 기능
객체를 정의하면 여러 후크 함수 (모든 선택 사항)가 제공 될 수 있습니다.
• 바인딩 : 한 번만 호출되며 명령이 처음으로 요소에 묶여있을 때 호출됩니다.
• 업데이트 : 첫 번째 호출은 초기 값을 매개 변수로 바인딩 한 후 즉시 호출 된 다음 바운드 값이 변경 될 때마다 매개 변수가 새 값과 이전 값입니다.
• undind : 명령이 요소에서 미완성 될 때 한 번만 호출됩니다.
예
vue.directive ( 'my-directive', {bind : function () {// 준비 작업 // 예를 들어, 한 번만 실행 해야하는 이벤트 프로세서 또는 높은 소비 작업을 추가}, update : function (newValue, OldValue) {// 값이 업데이트 될 때 작업 // ehip valuet}, fort}, fort (fort})에서 한 번도 호출됩니다. bind ()}}에 의해 추가 된 이벤트 리스너 삭제등록한 후 Vue.js 템플릿에서 이와 같이 사용할 수 있습니다 (접두사 V-를 추가하십시오).
<div v-my-directive = "somevalue"> </div>
업데이트 함수 만 필요한 경우 정의 객체 대신 함수를 전달할 수 있습니다.
vue.directive ( 'my-directive', function (value) {//이 함수는 update ()}로 사용됩니다)지침 인스턴스 속성
모든 후크 함수는 실제 지침 객체로 복사되며,이 후크 내부는이 지시어 객체를 가리 킵니다. 이 개체는 몇 가지 유용한 속성을 노출시킵니다.
• EL : 지침에 묶인 요소.
• VM : 명령을 소유 한 컨텍스트 뷰 모델.
• 표현 : 매개 변수 및 필터를 제외한 지침의 표현.
• ARG : 지침의 매개 변수.
• 이름 : 접두사가없는 지침의 이름.
• 수정 자 : 지침 용 수정자를 포함하는 객체.
• 설명 자 : 지침의 구문 분석 결과가 포함 된 개체.
이러한 속성을 읽기 전용으로 취급하고 수정하지 않아야합니다. 지침 개체에 사용자 정의 속성을 추가 할 수도 있지만 기존 내부 속성을 덮어 쓰지 않도록주의하십시오.
예:
<div id = "demo"v-demo : hello.ab = "msg"> </div>
vue.directive ( 'demo', {bind : function () {console.log ( 'demo bound!')}, update : function : function (value) {this.el.innerhtml = 'name -' + this.name + '<br>' + 'expression-' + this. expression + '<br>'hartument - ' + this. <br>'modifiers + '<br> modifiers +' json.stringify (this.modifiers) + '<br>' + 'value -' + value}}) var demo = new vue ({el : '#demo', data : {msg : 'hello!'}})물체 문자 그대로
지침에 여러 값이 필요한 경우 JavaScript 객체를 문자로 전달할 수 있습니다. 지시문은 법적 자바 스크립트 표현식을 사용할 수 있습니다.
<div v-demo = "{color : 'white', text : 'hello!' } "> </div>
vue.directive ( 'demo', function (value) {console.log (value.color) // "white"console.log (value.text) // "hello!"})문자 수정 자
지침이 문자 그럴 수정자를 사용하면 그 값은 일반 문자열로 처리되고 업데이트 방법으로 전달됩니다. 일반 문자열은 데이터 변경에 응답 할 수 없기 때문에 업데이트 방법은 한 번만 호출됩니다.
<div v-demo.literal = "foo bar baz">
vue.directive ( '데모', 함수 (value) {console.log (value) // "foo bar baz"})원소 지침
때때로 우리는 기능 형태가 아닌 사용자 정의 요소 형태로 지시문을 사용하고자합니다. 이것은 Angular의 "E"지침과 매우 유사합니다. 요소 지침은 경량 구성 요소로 간주 될 수 있습니다. 다음과 같이 사용자 정의 요소 지침을 등록 할 수 있습니다.
vue.elementDirective ( 'my-directive', {// api bind : function () {// 작동 this.el ...}})다음과 같이 쓰지 마십시오.
<div v-my-directive> </div>
이 방법을 작성하십시오 :
<my-directive> </my-directive>
요소 명령은 매개 변수 나 표현을 받아 들일 수 없지만 요소의 특성을 읽어 동작을 결정할 수 있습니다.
일반적인 지시와 달리 요소 지침은 최종입니다. 즉, Vue가 요소 명령을 만나면 요소와 그 자식 요소를 건너 뛸 수 있습니다. 요소 명령 자체 만 요소와 자식 요소에서 작동 할 수 있습니다.
고급 옵션
매개 변수
사용자 정의 지시문은 매개 변수 배열을 수신하고 기능 목록을 지정할 수 있으며 VUE 컴파일러는 이러한 바운드 요소의 이러한 기능을 자동으로 추출합니다. 예를 들어:
<div v-example a = "hi"> </div>
vue.directive ( 'example', {params : [ 'a'], bind : function () {console.log (this.params.a) //-> "hi"}})이 API는 또한 동적 특성을 지원합니다. this.params [키]가 자동으로 업데이트됩니다. 또한 값이 변경 될 때 콜백을 호출하도록 지정할 수 있습니다.
<div v-example v-bind : a = "somevalue"> </div>
vue.directive ( 'example', {params : [ 'a'], paramwatchers : {a : function (val, oldval) {console.log ( 'a change!')}})소품과 유사하게 지시 매개 변수의 이름은 JavaScript에서 Camelcase 스타일을 사용하며 케밥 케이스 스타일은 HTML에 해당합니다. 예를 들어, 템플릿에 '비활성화-효과'가 있다고 가정하고 'disableEffect'가있는 javaScript로 액세스하십시오.
깊은
객체에 사용자 정의 지시 사항이 사용되며 객체의 내부 속성이 변경 될 때 업데이트가 트리거되면 Deep : True를 지정하십시오.
<div v-my-directive = "obj"> </div>
vue.directive ( 'my-directive', {deep : true, update : function (obj) {// 'obj` change}}의 중첩 된 속성이있을 때 호출))Twoway
지시문이 VUE 인스턴스에 데이터를 다시 작성하려는 경우 Directive 정의 객체에 twoway : true를 지정하십시오. 이 옵션은이 옵션을 허용합니다. 세트 (값)는 지침에 사용할 수 있습니다.
vue.directive ( 'example', {twoway : true, bind : function () {this.handler = function () {// vm // v-example = "abc"가 v-example = "abc"가 vm.abc "가 주어진 값 this.set (this.el.value (this.el.el.value)}, 'this.el.el.el.el.el.el. this.handler)}, unbind : function () {this.el.removeeventListener ( 'input', this.handler)}}).수락 시간
수락 전환 통과 : True는 V-On과 마찬가지로 사용자 정의 지시문이 인라인 진술을 수락 할 수 있도록합니다.
<div v-my-directive = "a ++"> </div>
vue.directive ( 'my-directive', {acceptStatement : true, update : function (fn) {// 들어오는 값은 함수입니다.일반적으로 템플릿에서 부작용을 피하려고하기 때문에 현명하게 사용하십시오.
단말기
1.0.19+
VUE는 DOM 트리를 재귀 적으로 통과하여 모듈을 컴파일합니다. 그러나 말기 지침이 발생하면이 요소의 자손 요소를 가로 지르는 것을 중지합니다. 이 지침은이 요소와 그 후손을 편집하는 과제를 인수합니다. V-IF 및 V-FOR은 터미널 지침입니다.
맞춤형 터미널 지시문을 작성하는 것은 높은 수준의 주제이며 VUE의 편집 프로세스를 더 잘 이해해야하지만, 이는 사용자 정의 터미널 지시문을 작성하는 것이 불가능하다는 것을 의미하지는 않습니다. 사용 터미널 사용 : 맞춤형 터미널 지침을 지정하려면 true, 부분을 컴파일하려면 vue.fragmentfactory를 사용해야 할 수도 있습니다. 다음은 컨텐츠 템플릿을 컴파일하고 페이지의 다른 장소에 결과를 주입하는 사용자 정의 터미널 지침입니다.
var fragmentFactory = vue.fragmentFactoryVar remove = vue.util.removevar createAnchor = vue.util.createAnchorvue.directive ( 'inject', {terminal : true, bind : function () {var container = document.getElementById (this.getEanchor = createAnchor (v-inject ') contaconer (') 제거 (this.el) var factory = new fragmentFactory (this.vm, this.el) this.frag = factory.create (this._host, this._scope, this._frag) th리<div id = "modal"> </div> ... <div v-inject : modal> <h1> 헤더 </h1> <p> Body </p> <p> 바닥 글 </p> </div>
사용자 정의 터미널 지시문을 작성하려면 V-IF 및 V-FOR과 같은 내장 터미널 지시문의 소스 코드를 읽어 VUE의 내부 메커니즘을 더 잘 이해하는 것이 좋습니다.
우선 사항
명령에 우선 순위를 할당 할 수 있습니다. 지정되지 않으면 일반 명령의 기본값은 1000이고 터미널 명령의 기본값은 2000입니다. 동일한 요소에 대한 우선 순위가 높은 지침은 다른 명령보다 일찍 처리됩니다. 동일한 우선 순위를 가진 지시문은 요소 속성 목록에 표시되는 순서로 처리되지만이 순서가 다른 브라우저에서 일관성이 있음을 보장 할 수는 없습니다.
내장 지시문의 우선 순위는 API에서 볼 수 있습니다. 또한 프로세스 제어 지침 V-IF 및 V-FOR은 컴파일 프로세스 중에 항상 우선 순위가 가장 높습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.