집 >웹 프론트엔드 >JS 튜토리얼 >Vue 사용자 정의 명령어 및 명령어 정의 기능(코드)에 대한 상세 분석

Vue 사용자 정의 명령어 및 명령어 정의 기능(코드)에 대한 상세 분석

不言원래의: 2018-07-21 16:09:362078검색

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(&#39;demo&#39;, {
  bind: function (el, binding, vnode) {
      console.log(&#39;bind&#39;);
    var s = JSON.stringify
    el.innerHTML =
      &#39;name: &#39;       + s(binding.name) + &#39;<br>&#39; +
      &#39;value: &#39;      + s(binding.value) + &#39;<br>&#39; +
      &#39;expression: &#39; + s(binding.expression) + &#39;<br>&#39; +
      &#39;argument: &#39;   + s(binding.arg) + &#39;<br>&#39; +
      &#39;modifiers: &#39;  + s(binding.modifiers) + &#39;<br>&#39; +
      &#39;vnode keys: &#39; + Object.keys(vnode).join(&#39;, &#39;)
  }
});
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;hello!&#39;
  }
});

4. 함수 약어: 대부분의 경우 바인드 및 업데이트 후크에 대해 반복적인 작업을 수행하고 싶고 다른 후크 기능은 신경쓰고 싶지 않을 수 있습니다. 다음과 같이 작성할 수 있습니다:

Vue.directive(&#39;color-swatch&#39;, function (el, binding) {
  el.style.backgroundColor = binding.value
})

5. 객체 리터럴: 명령에 여러 값이 필요한 경우 JavaScript 객체 리터럴을 전달할 수 있습니다. 지시문 함수는 모든 합법적인 유형의 Javascript 표현식을 허용한다는 점을 기억하십시오.

<p v-demo="{ color: &#39;white&#39;, text: &#39;hello!&#39; }"></p>

Vue.directive(&#39;demo&#39;, 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(&#39;hello&#39;, {
        bind: function (el){
            console.log(&#39;bind&#39;);
        },
        inserted: function (el){
            console.log(&#39;inserted&#39;);
        },
        update: function (el){
            console.log(&#39;update&#39;);
        },
        componentUpdated: function (el){
            console.log(&#39;componentUpdated&#39;);
        },
        unbind: function (el){
            console.log(&#39;unbind&#39;);
        }
    });

    var myComp = {
        template: &#39;<h1 v-hello>{{msg}}</h1>&#39;,
        props: {
            msg: String
        }
    }

    new Vue({
        el: &#39;#app&#39;,
        data: {
            msg: &#39;Hello&#39;
        },
        components: {
            myComp: myComp
        },
        methods: {
            update: function (){
                this.msg = &#39;Hi&#39;;
            },
            uninstall: function (){
                this.msg = &#39;&#39;;
            },
            install: function (){
                this.msg = &#39;Hello&#39;;
            }
        }
    })
</script>

a, 페이지 로드 시: 바인딩 삽입

b, 구성 요소 업데이트: 구성 요소 업데이트Updated

c, 구성 요소 제거: 바인딩 해제

d, 구성 요소 다시 설치: 바인딩 삽입

차이점에 유의하세요. 바인드 및 삽입: 바인드 시 상위 노드는 null이고 삽입 시 상위 노드가 존재합니다. 업데이트 및 구성 요소 업데이트: 업데이트는 데이터가 업데이트되기 전이고, 구성 요소 업데이트는 데이터가 업데이트된 후입니다.

6. 마지막으로 실제로 개발된 명령어 캡슐화 구현

기본 아이디어

import store from &#39;@/store&#39;

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.state.permission.pagePermission
    if (value && typeof value === &#39;string&#39; && 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="&#39;button&#39;"`)
    }
  }
}

API를 외부에 노출

import permission from &#39;./permission&#39;

const install = function(Vue) {
  Vue.directive(&#39;permission&#39;, permission)
}

if (window.Vue) {
  window[&#39;permission&#39;] = permission
  Vue.use(install) // eslint-disable-line
}

permission.install = install
export default permission

Vue 사용자 정의 명령어 및 명령어 정의 기능(코드)에 대한 상세 분석

관련 기사