Vue.JS에서 사용자 정의 지시어를 사용하는 방법
- php中世界最好的语言원래의
- 2018-03-07 11:50:331628검색
이번에는 Vue.JS의 커스텀 명령어를 사용하는 방법을 알려드리겠습니다. Vue.JS의 커스텀 명령어를 사용할 때 주의사항은 무엇인가요?
Vue.js를 사용하면 사용자 정의 지시문을 등록할 수 있으며 이를 통해 Vue에게 몇 가지 새로운 기술, 즉 데이터 변경 사항을 DOM 동작에 매핑하는 방법을 가르칠 수 있습니다. Vue.directive(id, 정의) 메소드를 사용하면 지시문 ID와 정의 객체를 전달하여 전역 사용자 지정 지시문을 등록할 수 있습니다. 개체를 정의하려면 몇 가지 후크 기능(모두 선택 사항)을 제공해야 합니다.
bind: 명령이 처음으로 요소를 바인딩할 때 한 번만 호출됩니다.
update: 바인드 직후 처음 호출될 때 얻은 매개변수는 향후 바인딩의 초기 값이며 바인딩된 값이 변경될 때마다 호출되며 새 값과 이전 값은 다음과 같이 가져옵니다. 두 개의 매개변수.
unbind: 명령이 요소 바인딩을 해제할 때 한 번만 호출됩니다.
예:
Vue.directive('my-directive', { bind: function () { // 做绑定的准备工作
// 比如添加事件监听器，或是其他只需要执行一次的复杂操作
}, update: function (newValue, oldValue) { // 根据获得的新值执行对应的更新
// 对于初始值也会被调用一次
}, unbind: function () { // 做清理工作
// 比如移除在 bind() 中添加的事件监听器
}
})사용자 지정 지시문이 등록되면 다음과 같이 Vue.js 템플릿에서 사용할 수 있습니다(Vue.js 지시문 접두사를 추가해야 하며 기본값은 v-입니다).
<div v-my-directive="someValue"></div>
업데이트 기능이 필요한 경우에만 정의 개체 대신 함수만 전달할 수 있습니다.
Vue.directive('my-directive', function (value) { // 这个函数会被作为 update() 函数使用})모든 후크 기능은 실제 명령 개체에 복사되고 이 명령 개체는 모든 후크 기능의 this
컨텍스트가 됩니다. . 일부 유용한 공용 속성이 지시문 개체에 노출됩니다.
el: 지시문이 바인딩된 요소
vm: 지시문을 소유하는 컨텍스트 ViewModel
expression: 매개변수 및 filters를 제외한 지시문의 expression
arg: 명령의 매개변수
raw: 구문 분석되지 않은 원시 표현식
name: 접두사가 없는 명령 이름
이 속성은 읽기 전용이므로 수정하지 마세요. 지시문 개체에 사용자 지정 속성을 연결할 수도 있지만 기존 내부 속성을 덮어쓰지 않도록 주의하세요.
디렉티브 개체 속성 사용 예:
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script></head><body><div id="demo" v-demo-directive="LightSlateGray : msg"></div><script>
Vue.directive('demoDirective', {
bind: function () { this.el.style.color = '#fff'
this.el.style.backgroundColor = this.arg
},
update: function (value) { this.el.innerHTML = 'name - ' + this.name + '<br>' + 'raw - ' + this.raw + '<br>' + 'expression - ' + this.expression + '<br>' + 'argument - ' + this.arg + '<br>' + 'value - ' + value
}
}); var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})</script></body></html>다중 절
동일한 기능 내에서 쉼표로 구분된 여러 절은 여러 디렉티브 인스턴스로 바인딩됩니다. 다음 예에서는 명령어가 생성되고 두 번 호출됩니다.
<div v-demo="color: 'white', text: 'hello!'"></div>
단일 명령어 인스턴스를 사용하여 여러 매개변수를 처리하려는 경우 리터럴 개체를 표현식으로 사용할 수 있습니다.
<div v-demo="{color: 'white', text: 'hello!'}"></div>
Vue.directive('demo', function (value) { console.log(value) // Object {color: 'white', text: 'hello!'}})Literal Instructions
자체 명령어를 생성하는 경우 지시문을 정의할 때 isLiteral: true가 전달되면 속성 값은 직접 문자열로 처리되어 지시문의 표현식에 할당됩니다. 리터럴 명령어는 데이터 모니터링을 설정하려고 시도하지 않습니다.
예:
<div v-literal-dir="foo"></div>
Vue.directive('literal-dir', { isLiteral: true, bind: function () { console.log(this.expression) // 'foo'
}
})동적 리터럴 지시어
그러나 리터럴 지시어에 Mustache 태그가 포함된 경우 지시어는 다음과 같이 작동합니다.
디렉티브 인스턴스에는 this._isDynamicLiteral 속성이 true로 설정됩니다. 업데이트 기능이 제공되지 않으면 Mustache 표현식은 한 번만 평가되고 값은 this.expression에 할당됩니다. 표현식에 대해 데이터 모니터링이 수행되지 않습니다.
업데이트 기능이 제공되는 경우 명령어는 계산 결과가 변경되면 표현식에 대한 데이터 감시를 설정하고 업데이트를 호출합니다.
양방향 지시어
지시어가 Vue 인스턴스에 데이터를 다시 쓰려면 twoWay: true를 전달해야 합니다. 이 옵션을 사용하면 지시어에서 this.set(value)를 사용할 수 있습니다.
Vue.directive('example', { twoWay: true, bind: function () { this.handler = function () { // 把数据写回 vm
// 如果指令这样绑定 v-example="a.b.c",
// 这里将会给 `vm.a.b.c` 赋值
this.set(this.el.value)
}.bind(this) this.el.addEventListener('input', this.handler)
}, unbind: function () { this.el.removeEventListener('input', this.handler)
}
})인라인 문
acceptStatement: true를 전달하면 사용자 지정 지시문이 v-on:
<div v-my-directive="a++"></div>
Vue.directive('my-directive', { acceptStatement: true, update: function (fn) { // the passed in value is a function which when called,
// will execute the "a++" statement in the owner vm's
// scope.
}
})과 같은 인라인 문을 허용할 수 있습니다. 하지만 일반적으로 템플릿에서 부작용을 피하고 싶기 때문에 이 기능을 현명하게 사용하세요.
심층 데이터 관찰
객체에 사용자 정의 명령어를 사용하고 객체 내부의 중첩 속성이 변경될 때 명령어의 업데이트 기능이 트리거될 수 있는 경우 명령어 정의를 깊이 전달해야 합니다. : 진실.
<div v-my-directive="obj"></div>
Vue.directive('my-directive', { deep: true, update: function (obj) { // 当 obj 内部嵌套的属性变化时也会调用此函数
}
})명령 우선 순위
명령에 대한 우선 순위 번호를 제공하도록 선택할 수 있습니다(기본값은 0). 동일한 요소에 대해 우선순위가 높은 명령어는 다른 명령어보다 먼저 처리됩니다. 동일한 우선순위를 가진 명령은 요소 속성 목록에 나타나는 순서대로 처리되지만 이 순서가 다른 브라우저에서 일관된다는 보장은 없습니다.
일반적으로 사용자는 내장 명령어의 우선순위에 신경 쓸 필요가 없습니다. 관심이 있다면 소스 코드를 참조하면 됩니다. 논리 제어 명령어 v-repeat 및 v-if는 "터미널 명령어"로 간주되며 컴파일 프로세스 중에 항상 가장 높은 우선순위를 갖습니다.
요소 지시어
때로는 지시어를 기능이 아닌 사용자 정의 요소로 사용할 수 있기를 원할 수도 있습니다. 이는 Angular의 E-type 지시어 개념과 매우 유사합니다. 요소 지시문은 자체 정의된 경량 구성요소로 볼 수 있습니다(나중에 설명함). 다음과 같이 사용자 정의 요소 명령을 등록할 수 있습니다.
Vue.elementDirective('my-directive', { // 和普通指令的 API 一致
bind: function () { // 对 this.el 进行操作...
}
}) 이를 사용할 때 더 이상 <div v-my-directive></div>
와 같이 쓰지 않고 대신 다음과 같이 씁니다.
<my-directive></my-directive>
元素指令不能接受参数或表达式，但是它可以读取元素的特性，来决定它的行为。与通常的指令有个很大的不同，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器
위 내용은 Vue.JS에서 사용자 정의 지시어를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!