Vue.directive() 사용법에 대한 자세한 설명

명령어 정의 함수는 여러 후크 기능을 제공합니다(선택 사항):

bind: 한 번만 호출되며, 명령이 처음으로 요소에 바인딩될 때 호출됩니다. 이 후크 함수는 한 번 실행되는 초기화를 정의하는 데 사용할 수 있습니다. 행동할 때.
삽입됨: 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(문서에 반드시 필요한 것은 아니지만 상위 노드가 존재하는 한 호출할 수 있습니다).

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

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

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

저는 초보자입니다. 공식 웹사이트를 보고 혼란스러워했는데 Baidu Vue.directive() 예제와 사용법 중 일부는 매우 심오하고 일부는 완벽하지 않습니다. 두 가지 간단한 데모를 게시했습니다. 이를 보는 친구들에게 도움이 되기를 바랍니다. it:

1 공식 웹사이트에서 제공하는 데모, 페이지 입력을 새로 고치고 자동으로 포커스를 얻습니다:

<p id="app"> 
<SPAN style="WHITE-SPACE: pre"> </SPAN><input type="text" v-focus/> 
</p> 

<p id="app">
 <input type="text" v-focus/>
</p>

// 注册一个全局自定义指令 v-focus  
Vue.directive(&#39;focus&#39;, { 
  // 当绑定元素插入到 DOM 中。  
  inserted: function (el,binding) { 
    <SPAN style="WHITE-SPACE: pre"> </SPAN>// 聚焦元素  
    <SPAN style="WHITE-SPACE: pre"> </SPAN>el.focus(); 
  } 
}); 
new Vue({ 
　　el:&#39;#app&#39; 
}); 
// 注册一个全局自定义指令 v-focus
Vue.directive(&#39;focus&#39;, {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el,binding) {
   // 聚焦元素
   el.focus();
 }
});
new Vue({
　　el:&#39;#app&#39;
});

2 드래그 데모: 1) 드래그된 요소는 위치에 배치되어야 합니다. dragged;

2) Auto 정의 명령이 완료된 후 Vue를 인스턴스화하고 요소를 마운트해야 합니다.

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

rreee

위 내용은 Vue.directive() 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!