Vue.directive에서 사용자 지정 지시문 관련 문제를 발견했습니다.

이 글은 주로 Vue.directive 커스텀 명령어의 문제점을 요약해서 소개하고 있으니 필요하신 분들은 참고하시면 됩니다

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 인스턴스화 개체 앞에 명령을 작성해야 합니다. 그렇지 않으면 명령 오류 해결 실패가 보고되고 올바른 시퀀스 코드가 게시됩니다.

<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. 최종 출력 페이지, 완벽합니다... 주의해야 할 작은 문제입니다.

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

관련 기사:

숫자 배열의 중복 제거 및 최적화를 위해 js로 이진 트리를 구성하는 방법에 대한 자세한 설명

Vue의 bass.scss 처리 솔루션 글로벌 도입에 대한 자세한 설명

노드를 사용하여 생성 나만의 명령줄 도구 방법 튜토리얼

위 내용은 Vue.directive에서 사용자 지정 지시문 관련 문제를 발견했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!