vue 사용자 정의 지시어

Vue에서는 기본 핵심 지시문(v-model 및 v-show) 외에도 사용자 지정 지시문 등록도 허용합니다. Vue2.0에서 코드 재사용의 주요 형태와 추상화는 구성요소입니다. 그러나 어떤 경우에는 여전히 순수 DOM 요소에 대해 하위 수준 작업을 수행해야 하며, 이 경우 사용자 정의 지시문이 사용됩니다.

페이지가 로드되면 요소에 초점이 맞춰집니다(참고: 모바일 Safari에서는 자동 초점이 작동하지 않습니다). 실제로 이 페이지를 연 후 아무 것도 클릭하지 않는 한 입력 상자에는 여전히 초점이 맞춰져 있어야 합니다. 이제 지시문을 사용하여 이 기능을 구현해 보겠습니다. (권장 학습: JavaScript 비디오 튜토리얼)

// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {    // 聚焦元素
    el.focus()
  }
})

로컬 지시문을 등록하려는 경우 구성 요소는 지시문 옵션도 허용합니다.

directives: {  focus: {    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

그런 다음 이를 다음의 모든 요소에 추가할 수 있습니다. 템플릿 다음과 같이 새로운 v-focus 속성을 사용하십시오:

<input v-focus>

지시문 정의 객체는 다음 후크 기능을 제공할 수 있습니다(모두 선택 사항):

bind: 지시문이 요소에 처음 바인딩될 때 한 번만 호출됩니다. 부르다. 여기에서 일회성 초기화 설정을 수행할 수 있습니다.

inserted: 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(상위 노드만 존재하도록 보장되지만 반드시 문서에 삽입될 필요는 없습니다).

update: 구성 요소의 VNode가 업데이트될 때 호출되지만 하위 VNode가 업데이트되기 전에 발생할 수 있습니다. 지시어의 값은 변경되었을 수도 있고 변경되지 않았을 수도 있습니다. 하지만 업데이트 전과 후의 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다(자세한 후크 기능 매개 변수는 아래 참조).

comComponentUpdated: 명령어가 있는 구성 요소의 VNode와 해당 하위 VNode가 모두 업데이트된 후에 호출됩니다.

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

더 많은 JavaScript 관련 기술 기사를 보려면 js 튜토리얼 칼럼을 방문하여 알아보세요!

위 내용은 vue 사용자 정의 지시어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!