Vue.directive() 사용법을 자세히 설명하세요(예제를 포함한 자세한 튜토리얼)-JS 튜토리얼-php.cn

Vue.directive() 사용법을 자세히 설명하세요(예제를 포함한 자세한 튜토리얼)

亚连

풀어 주다： 2018-06-01 15:01:12

원래의

1256명이 탐색했습니다.

이 글에서는 주로 Vue.directive()의 사용법과 예시를 소개합니다. 필요한 친구는 공식 웹사이트 예시를 참고하세요:

https://cn.vuejs.org/v2/api/#Vue-directive

https://cn.vuejs.org/v2/guide/custom-directive.html

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

bind: 한 번만 호출되고 지시문이 처음으로 바인딩될 때 호출됨 요소가 호출되면 이 후크 함수를 사용하여 바인딩 시 한 번 실행되는 초기화 작업을 정의할 수 있습니다.

삽입됨: 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(문서에 반드시 필요한 것은 아니지만 상위 노드가 존재하는 한 호출할 수 있습니다).

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

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

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

저는 초보자입니다. 공식 웹사이트를 보고 혼란스러워했는데 Baidu

예제와 사용법 중 일부는 매우 심오하고 일부는 완벽하지 않습니다. 두 가지 간단한 데모를 게시했습니다. 참조하세요:

Vue.directive()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) 사용자 정의 명령이 완료되었습니다. 그런 다음 Vue를 인스턴스화하고 요소를 마운트해야 합니다.

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

<style type="text/css"> 
  .one,.two{ 
    height:100px; 
    width:100px; 
    border:1px solid #000; 
    position: absolute; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    -moz-user-select: -moz-none; 
    cursor: pointer; 
  } 
  .two{ 
    left:200px; 
  } 
</style> 
<p id="app"> 
  <p class="one" v-drag>拖拽one</p> 
  <p class="two" v-drag>拖拽two</p> 
</p> 
<style type="text/css">
 .one,.two{
 height:100px;
 width:100px;
 border:1px solid #000;
 position: absolute;
 -webkit-user-select: none;
 -ms-user-select: none;
 -moz-user-select: -moz-none;
 cursor: pointer;
 }
 .two{
 left:200px;
 }
</style>
<p id="app">
 <p class="one" v-drag>拖拽one</p>
 <p class="two" v-drag>拖拽two</p>
</p>
[javascript] view plain copy print?Vue.directive(&#39;drag&#39;, { 
  inserted:function(el){ 
    el.onmousedown=function(e){ 
      let l=e.clientX-el.offsetLeft; 
      let t=e.clientY-el.offsetTop; 
      document.onmousemove=function(e){ 
        el.style.left=e.clientX-l+&#39;px&#39;; 
        el.style.top=e.clientY-t+&#39;px&#39;; 
      }; 
      el.onmouseup=function(){ 
        document.onmousemove=null; 
        el.onmouseup=null; 
      } 
    } 
  } 
}) 
new Vue({ 
　　el:&#39;#app&#39; 
});

로그인 후 복사

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.