Found an issue with custom directives in Vue.directive

This article mainly introduces a summary of the problems with Vue.directive custom instructions. Friends in need can refer to it

1. Today I reviewed the code of Vue custom instructions, and the result was a very speechless result. , post the code first.

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. When the page was opened, it was blank, the width and height were set, and the p did not turn black. Check that the code is correct and there are no syntax errors. Then I considered whether it was a problem with the vue.min.js file, and then downloaded the development version from the official website and used vue.js. The result was a surprising discovery.

#4. It turns out that the production version of vue.min.js does not support error reporting, which is really a pitfall!

5. Finally understood the reason, and it is very important that the instruction must be written in front of the vue instantiation object, otherwise an error will be reported as Failed to resolve directive; finally, the correct sequence code will be posted

<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. The final output page is perfect... small issues to pay attention to.

#The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

detailed explanation of js building a binary tree for deduplication and optimization of numerical arrays

detailed explanation of Vue’s global introduction of bass .scss solution

Using node to create your own command line tool tutorial

The above is the detailed content of Found an issue with custom directives in Vue.directive. For more information, please follow other related articles on the PHP Chinese website!