>  기사  >  웹 프론트엔드  >  내부 사용자 지정 지침 및 전역 사용자 지정 지침 구현

내부 사용자 지정 지침 및 전역 사용자 지정 지침 구현

巴扎黑
巴扎黑원래의
2017-07-23 15:08:131379검색

Vue에서는 일반적으로 데이터 기반 뷰를 사용할 때 내부 지침이 일부 요구 사항을 해결하지 못하는 경우가 있습니다. 이때 Vue는 매우 유용한 것을 제공합니다

directive

이 단어는 우리가 쓰는 키워드입니다. 맞춤 명령어

정의 명령어는 여러 가지 Hook 기능을 제공하는데, 간단히 말해서 Hook 기능이 무엇인지 궁금하실텐데요.

  • 바인딩bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

  • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

  • update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

  • unbind: 명령이 처음으로 요소에 바인딩될 때 한 번만 호출됩니다. 이 후크 함수를 사용하여 바인딩 시 한 번 실행되는 초기화 작업을 정의합니다.

삽입: 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(상위 노드가 존재하는 한 호출할 수 있으며 문서에 존재할 필요는 없습니다).

update

: 바인딩 값 변경 여부에 관계없이 바인딩된 요소가 있는 템플릿이 업데이트될 때 호출됩니다. 업데이트 전과 후의 바인딩 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다(자세한 후크 기능 매개 변수는 아래 참조).

comComponentUpdated

: 바인딩된 요소가 있는 템플릿이 업데이트 주기를 완료할 때 호출됩니다.

바인딩 해제: 한 번만 호출되며, 명령이 요소에서 바인딩 해제될 때 호출됩니다.

코드를 시작해 보겠습니다. 사용자 지정 명령을 수행하는 방법을 더 잘 이해해 보겠습니다.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://unpkg.com/vue/dist/vue.js?1.1.11"></script></head><body><div id="app"><div class="ab" v-css="{&#39;color&#39;:&#39;red&#39;,&#39;font-size&#39;:&#39;30px&#39;}">hello</div><input type="text" v-focus></div>
 </body></html>

html에서 v-css 및 v-focus 두 가지 명령을 보았습니다

사용자 정의합니다. v-
  • Vue.directive("css",{//钩子函数 ,el就是当前元素    inserted(el,binding){//el绑定的元素本身//binding就是css指令里面的的对象元素let styleobj=binding.value,arr=[];for(let key in styleobj){
                arr.push(key+":"+styleobj[key])
                }
            arr=arr.join(";");
            el.style.cssText=arr;
            },
        bind(el,binding) {//指令绑定在元素上时候执行,只执行一次    }
    });new Vue({
              el:'#app',
            data:{
                show:true},
            directives:{
            focus:{
                inserted(el,binding){//el绑定的元素本身//binding就是css指令里面的的对象元素                el.focus();
                    }
                }
            }
        });

    를 js에서 볼 수 있습니다.
  • Vue.directive("css",{})

  • 우리는

    새로운 Vue 코드 외부에서 이러한 단락을 정의합니다. 이것이 우리의

    전역 사용자 지정 지시어
  • 입니다. 템플릿 메소드

css는 사용자 정의 지시어의 이름입니다.

{} 내부에 후크 함수를 작성하면 됩니다. 모든 후크 함수에는 기본적으로 2개의 매개변수가 있습니다.

el,bound





el: 명령어를 사용하여 DOM을 직접 조작할 수 있습니다.

바인딩은 바인딩 요소 자체의 개체입니다.

위에서 우리는 바인딩이 바인딩 명령의 이름과 값을 유지한다는 것을 알 수 있습니다. 이는 매우 중요합니다.

🎜🎜로컬 사용자 정의 명령 🎜 🎜🎜directives:{🎜 name:{🎜🎜 }🎜 }🎜🎜차이점은 새로운 Vue로 작성한다는 점이며, 내부의 api 작업은 위의 전역 사용자 정의 지시문과 동일합니다🎜🎜이제 우리는 코드 실행 결과🎜🎜🎜🎜 🎜스타일 참조가 올라간 것을 확인할 수 있습니다🎜🎜텍스트 상자에도 포커스가 맞춰졌습니다🎜🎜🎜

위 내용은 내부 사용자 지정 지침 및 전역 사용자 지정 지침 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.