Vue.directive의 사용자 정의 지침에 대한 자세한 설명

이번에는 Vue.directive의 사용자 정의 명령어에 대한 자세한 설명을 가져왔습니다. Vue.directive의 사용자 정의 명령어 Notes는 무엇인가요?

1. 오늘 리뷰 Vue 사용자 정의 명령어의 코드를 살펴보니 매우 말이 안 되는 결과가 나오므로 먼저 코드를 게시하겠습니다.

2.

<p id="example" v-change-by="myColor"></p>
  <script src="vue.min.js"></script>
  <script>
    new Vue({
      el:"#example",
      data:{
        msg:"",
        myColor:"#000"
      }
    });
    Vue.directive("change-by",{
      bind:(el,binding)=>{
        el.style.background=binding.value;
      }
    });
  </script>

3. 페이지를 열었을 때 비어있고 너비와 높이가 설정되어 있으며 p가 검게 변하지 않았습니다. 코드가 올바른지, 문법적 오류가 없는지 확인하세요. 그러다가 vue.min.js 파일에 문제가 있는 것은 아닌지 생각해 본 후, 공식 홈페이지에서 개발 버전을 다운받아서 vue.js를 사용했습니다. 그 결과는 놀라운 발견이었다.

4. vue.min.js의 프로덕션 버전은 오류 보고를 지원하지 않는 것으로 나타났습니다. 이는 정말 함정입니다!

5. 마침내 이유를 이해했다면 Vue 인스턴스화 객체 전에 명령을 작성해야 합니다. 그렇지 않으면 오류가 Failed to 해결 지시문으로 보고됩니다. 올바른 시퀀스 코드가 게시됩니다.

<p id="example" v-change-by="myColor"></p>
  <script>
    Vue.directive("change-by",{
      bind:(el,binding)=>{
        el.style.background=binding.value;
      }
    });
    new Vue({
      el:"#example",
      data:{
        msg:"",
        myColor:"#000"
      }
    });
  </script>

6. 최종 출력 페이지, 완벽합니다...주의해야 할 작은 문제입니다.

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

추천 도서:

ionic2에서 자동 생성기를 사용하는 방법

JsChart 구성 요소 사용에 대한 자세한 설명

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