Vue 사용자 정의 명령어는 전역적으로 또는 로컬로 정의될 수 있습니다. Vue 구성 요소는 HTML과 코드를 재사용하는 반면, Vue 명령어는 DOM의 확장된 재사용을 살펴보겠습니다.
1. Vue 사용자 정의 명령어: Vue.directive(id,definition)를 사용하여 전역 사용자 정의 명령어를 등록하고 구성 요소의 지시문 옵션을 사용하여 로컬 사용자 정의 명령어를 등록합니다.
2. Vue 후크 기능:
명령어 정의 기능은 여러 가지 후크 기능을 제공합니다(선택 사항):
bind: 한 번만 호출되며, 명령어가 처음으로 요소에 바인딩될 때 호출됩니다. a 바인딩 중에 한 번 수행되는 초기화 작업입니다.
inserted: 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(상위 노드가 존재하는 한 호출되며 문서에 존재할 필요는 없습니다).
update: 바인드 직후 처음 호출될 때 획득한 매개변수는 바인딩의 초기 값이 되며 나중에 바인딩 값이 변경되는지 여부에 관계없이 바인딩된 요소가 있는 템플릿이 업데이트될 때 호출됩니다. 업데이트 전과 후의 바인딩 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다(자세한 후크 기능 매개 변수는 아래 참조).
comComponentUpdated: 바인딩된 요소가 있는 템플릿이 업데이트 주기를 완료할 때 호출됩니다.
unbind: 한 번만 호출되며, 명령이 요소에서 바인딩 해제될 때 호출됩니다.
3. Vue 후크 기능의 매개변수: (el, 바인딩, vnode, oldVnode)
el: 명령어로 바인딩된 요소를 사용하여 DOM을 직접 작동할 수 있습니다.
바인딩: 다음 속성을 포함하는 객체
이름: v- 접두사를 제외한 명령어 이름
값: 명령어의 바인딩 값: v-my-directive="1+1" value 값은 2입니다.
oldValue: 명령에 의해 바인딩된 이전 값, 값 변경 여부에 관계없이 update 및 componentUpdated 후크 함수에서만 사용 가능
표현식: 바인딩된 값의 문자열 형식; v-my -directive="1+1", 표현식 값은 '1+1'입니다.
arg: 명령어에 전달된 매개변수(예: v-my-directive:foo), arg 값은 ' foo';
modifiers: 수정자를 포함하는 객체입니다. 예: v-my-directive.a.b, 수정자 값은 {'a':true,'b':true}
vnode: 다음에 의해 생성된 가상 노드입니다. Vue 컴파일;
oldVnode: 마지막 가상 노드는 update 및 componentUpdated 후크 기능에서만 사용할 수 있습니다.
<p id="app" v-demo:foo.a.b="message"></p> Vue.directive('demo', { bind: function (el, binding, vnode) { console.log('bind'); 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: '#app', data: { message: 'hello!' } });
4. 함수 약어: 대부분의 경우 바인드 및 업데이트 후크에 대해 반복적인 작업을 수행하고 싶고 다른 후크 기능은 신경쓰고 싶지 않을 수 있습니다. 다음과 같이 작성할 수 있습니다:
Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value })
5. 객체 리터럴: 명령에 여러 값이 필요한 경우 JavaScript 객체 리터럴을 전달할 수 있습니다. 지시문 함수는 모든 합법적인 유형의 Javascript 표현식을 허용한다는 점을 기억하십시오.
<p v-demo="{ color: 'white', text: 'hello!' }"></p> Vue.directive('demo', function (el, binding) { console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!" })
분석 예:
<p id="app"> <my-comp v-if="msg" :msg="msg"></my-comp> <button @click="update">更新</button> <button @click="uninstall">卸载</button> <button @click="install">安装</button> </p> <script type="text/javascript"> Vue.directive('hello', { bind: function (el){ console.log('bind'); }, inserted: function (el){ console.log('inserted'); }, update: function (el){ console.log('update'); }, componentUpdated: function (el){ console.log('componentUpdated'); }, unbind: function (el){ console.log('unbind'); } }); var myComp = { template: '<h1 v-hello>{{msg}}</h1>', props: { msg: String } } new Vue({ el: '#app', data: { msg: 'Hello' }, components: { myComp: myComp }, methods: { update: function (){ this.msg = 'Hi'; }, uninstall: function (){ this.msg = ''; }, install: function (){ this.msg = 'Hello'; } } }) </script>
a, 페이지 로드 시: 바인딩 삽입
b, 구성 요소 업데이트: 구성 요소 업데이트Updated
c, 구성 요소 제거: 바인딩 해제
d, 구성 요소 다시 설치: 바인딩 삽입
차이점에 유의하세요. 바인드 및 삽입: 바인드 시 상위 노드는 null이고 삽입 시 상위 노드가 존재합니다. 업데이트 및 구성 요소 업데이트: 업데이트는 데이터가 업데이트되기 전이고, 구성 요소 업데이트는 데이터가 업데이트된 후입니다.
6. 마지막으로 실제로 개발된 명령어 캡슐화 구현
기본 아이디어
import store from '@/store' export default { inserted(el, binding, vnode) { const { value } = binding const roles = store.state.permission.pagePermission if (value && typeof value === 'string' && value.length > 0) { const hasPermission = roles.some(role => { return role.permission == value }) if (!hasPermission) { el.parentNode && el.parentNode.removeChild(el) } } else { throw new Error(`need roles! Like v-permission="'button'"`) } } }
API를 외부에 노출
import permission from './permission' const install = function(Vue) { Vue.directive('permission', permission) } if (window.Vue) { window['permission'] = permission Vue.use(install) // eslint-disable-line } permission.install = install export default permission
관련 권장 사항:
방법 Vue를 사용하여 맞춤 지침이 포함된 드롭다운 메뉴를 완성하세요
위 내용은 Vue 사용자 정의 명령어 및 명령어 정의 기능(코드)에 대한 상세 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!