Vue.directive 사용자 정의 명령

4243 단어 Vuedirective지령
1.전역 API 는 무엇 입 니까?
전역 API 는 구조 기 에 있 지 않 고 전역 변 수 를 먼저 설명 하거나 Vue 에 새로운 기능 을 직접 정의 합 니 다.Vue 에는 오늘 우리 가 배 울 명령 Vue.directive 와 같은 전역 API 가 내장 되 어 있 습 니 다.쉽게 말 하면 구조 기 외부 에서 Vue 가 제공 하 는 API 함수 로 새로운 기능 을 정의 하 는 것 이다.
2.Vue.directive 사용자 정의 명령
우 리 는 시즌 1 에서 내부 명령 을 배 웠 고 우 리 는 자신 만 의 명령 을 정의 할 수 있다.예 를 들 어 우 리 는 v-jspang 의 명령 을 정의 해 야 한다.역할 은 바로 문 자 를 녹색 으로 만 드 는 것 이다.
사용자 정의 명령 에 앞서 우 리 는 작은 기능 을 썼 습 니 다.페이지 에 숫자 가 10 이 고 숫자 아래 에 단추 가 있 습 니 다.우 리 는 단 추 를 한 번 누 를 때마다 숫자 를 1 로 추가 합 니 다.
3.사용자 정의 명령 에서 전달 하 는 세 가지 매개 변수
el:명령 에 연 결 된 요 소 는 DOM 을 직접 조작 할 수 있 습 니 다.
binding:  하나의 대상,명령 을 포함 한 많은 정보.
vnode:Vue 컴 파일 로 생 성 된 가상 노드 입 니 다.
4.사용자 정의 명령 의 생명주기
사용자 정의 명령 은 다섯 개의 생명주기(갈고리 함수 라 고도 함)가 있 는데 각각 bind,inserted,update,componentUpdated,unbind 이다.
  • bid:한 번 만 호출 하고 명령 이 처음으로 요소 에 연결 되 었 을 때 호출 합 니 다.이 갈고리 함수 로 바 인 딩 할 때 한 번 의 초기 화 동작 을 정의 할 수 있 습 니 다.
  • inserted:바 인 딩 요소 가 부모 노드 에 삽입 되 었 을 때 호출 합 니 다(부모 노드 가 존재 하면 호출 할 수 있 습 니 다.document 에 저장 하지 않 아 도 됩 니 다)
  • update:요소 가 있 는 템 플 릿 업데이트 에 연결 되 었 을 때 호출 됩 니 다.바 인 딩 값 이 변 하 든 안 변 하 든 간 에.업데이트 전후의 바 인 딩 값 을 비교 함으로써 불필요 한 템 플 릿 업 데 이 트 를 무시 할 수 있 습 니 다.
  • componentUpdated:바 인 딩 요소 가 있 는 템 플 릿 이 업데이트 주 기 를 완성 할 때 호출 됩 니 다.
  • unbid:한 번 만 호출 하고 명령 과 요 소 를 풀 때 호출 합 니 다.
    • 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="../assets/js/vue.js"></script>
  <title>vue.directive      </title>
</head>
<body>
  <h1>vue.directive      </h1>
  <hr>
  <div id="app">
    <div v-jspang="color" id="aaa">
      {{num}}
    </div>
    <p>
      <button @click='jia'>  </button>
    </p>
    <p>
      <button onclick='unbind()'>  </button>
    </p>
  </div>
 
  <script type="text/javascript">
 
    function unbind(){
      app.$destroy();
    }
 
    //     
    Vue.directive('jspang',{
      bind:function(el,binding,vnode){//   
        /**
            var s=JSON.stringify;
            el.innerHTML = 
              'name:'    + s(binding.name) +'<br>' + 
              'value:'    + s(binding.value) +'<br>' + 
              'expression:' + s(binding.expression) +'<br>' ;
        **/
        el.style='color:'+binding.value;
         
 
        console.log('1 - bind');
      },
      inserted:function(){//     
        console.log('2 - inserted');
      },
      update:function(){//    
        console.log('3 - update');
      },
      componentUpdated:function(){//      
        console.log('4 - componentUpdated');
      },
      unbind:function(){//  
        console.log('5 - unbind');
      }
 
    })
 
    var app=new Vue({
      el:'#app',
      data:{
        color:'green',
        num:10
      },
      methods:{
        jia:function(){
          this.num++;
        }
      }
    })
  </script>
</body>
</html>

    
bind:function(){//   
   console.log('1 - bind');
},
inserted:function(){//     
   console.log('2 - inserted');
},
update:function(){//    
   console.log('3 - update');
},
componentUpdated:function(){//      
   console.log('4 - componentUpdated');
},
unbind:function(){//  
   console.log('1 - bind');
}
    위 에서 말 한 것 은 편집장 이 소개 한 Vue.directive 사용자 정의 명령 을 상세 하 게 통합 시 키 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
    php curl 의 깊이 있 는 해석
    php 무한 분류 에 대한 깊 은 이해

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage