Detailed explanation of custom instructions of Vue.directive

This time I will bring you a detailed explanation of Vue.directive's custom instructions. What are the precautions for Vue.directive's custom instructions? The following is a practical case, let's take a look.

1. TodayReviewThe code of Vue's custom instruction, the result is a very speechless result, I will 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 grammatical 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. I finally understand 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, post the correct sequence code

<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 problems, please pay attention to.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use the automatic generator in ionic2

Detailed explanation of the use of JsChart components

The above is the detailed content of Detailed explanation of custom instructions of Vue.directive. For more information, please follow other related articles on the PHP Chinese website!