Vue.directive 사용자 정의 명령 사용 설명

많은 튜 토리 얼 은 사용자 정의 명령 의 개념 과 문법 을 말 하고 있 으 며,상당히 아 프 게 본다.본 고 는 문법 과 개념 을 말 하지 않 고 용법 만 말한다.
사용자 정의 명령 은 기본적으로 DOM 을 조작 하 는 데 사 용 됩 니 다.공식 적 으로 데이터 구동 보 기 를 추천 하지만 가끔 은 사용자 정의 명령 으로 DOM 을 조작 해 야 합 니 다.명령 은 재 활용 할 수 있 습 니 다.
1.사용자 정의 명령 드래그
HTML:

 <div v-drag>     </div>

JS:

Vue.directive('drag', 
 inserted:function(el){ //inserted     :            ,   
  let oDiv=el; //el -->    DOM  
  oDiv.onmousedown=function(e){
    let l=e.clientX-oDiv.offsetLeft;
    let t=e.clientY-oDiv.offsetTop;
    document.onmousemove=function(e){
      oDiv.style.left=e.clientX-l+'px';
      oDiv.style.top=e.clientY-t+'px';
    };
    oDiv.onmouseup=function(){
      document.onmousemove=null;
      oDiv.onmouseup=null;
    }
  }
})

사용자 정의 명령 은 제3자 플러그 인 을 도입 할 수 있 습 니 다.이전 에는 JQuery 로 프로젝트 를 구 축 했 습 니 다.
사용자 정의 명령 의 장점 은 이전에 무엇 을 썼 든 JQuery 가 괜 찮 거나 원생 js 든 직접 사용자 정의 명령 으로 봉인 할 수 있 으 며 다시 쓸 필요 가 없다 는 것 이다.
예 를 들 어 이 드래그:
Drag.js:

export default function(el){
  let oDiv=el;
  oDiv.onmousedown=function(e){
    let l=e.clientX-oDiv.offsetLeft;
    let t=e.clientY-oDiv.offsetTop;
    document.onmousemove=function(e){
      oDiv.style.left=e.clientX-l+'px';
      oDiv.style.top=e.clientY-t+'px';
    };
    oDiv.onmouseup=function(){
      document.onmousemove=null;
      oDiv.onmouseup=null;
    }
  }
}

Vue:

import drag from 'drag.js'
Vue.directive('drag',drag)

HTML:

<div v-drag>     </div>

2.그림 불 러 오기
그림 을 불 러 오 는 과정 에서 불 러 오 는 것 이 완료 되 지 않 았 을 때 무 작위 색상 으로 자 리 를 차지 합 니 다.그림 을 불 러 온 후에 바로 표시 합 니 다.사용자 정의 명령 으로 완성 할 수 있 습 니 다.
HTML:

  <img v-imgUrl="url"></img> //         url  

  data () {
    url:'src/assets/logo.png'
  }

Vue:

  Vue.directive('imgUrl',function(el,binding){
    var color=Math.floor(Math.random()*1000000);//      
    el.style.backgroundColor='#'+color;

    var img=new Image();
    img.src=binding.value;// -->binding.value         
    img.onload=function(){
      el.style.backgroundColor='';
      el.src=binding.value;      
    }
  })

사용 가능lodash.js도구 모음
vue 더 많은 API 정리-->GO
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.