Vue.directive 自定義指令的問題

1.今天覆習一下Vue自定義指令的代碼，結果出現一個很無語的結果，先貼代碼。

 

2.

<div id="example" v-change-by="myColor"></div>
    <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.結果打開頁面，一片空白，寬高都有設置，div並無變黑。檢查代碼怎麼都是對的，沒有語法錯誤。而後考慮到是否是vue.min.js文件的問題，而後從官網下載了開發版，用vue.js。結果有驚喜的發現。

4.原來生產版本vue.min.js不支持報錯，真的神坑！

5.終於理解了緣由，而後很重要一點就是指令要寫在vue實例化對象前面，要否則會報錯 Failed to resolve directive；最後貼出正確順序代碼

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

6.最後輸出頁面，完美...小問題，要注意。