집 >웹 프론트엔드 >H5 튜토리얼 >Vue.directive()에 대한 자세한 그래픽 설명

Vue.directive()에 대한 자세한 그래픽 설명

php中世界最好的语言원래의: 2018-03-27 15:36:582169검색

이번에는 Vue.directive()에 대한 자세한 설명을 사진과 텍스트로 가져왔고, Vue.directive() 사용 시 주의사항은 무엇인지 살펴보겠습니다.

공식 웹사이트 예:

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

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

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

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

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('drag', { 
  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+'px'; 
        el.style.top=e.clientY-t+'px'; 
      }; 
      el.onmouseup=function(){ 
        document.onmousemove=null; 
        el.onmouseup=null; 
      } 
    } 
  } 
}) 
new Vue({ 
　　el:'#app' 
});

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!