Vue.js --- 关于在vue中创建自定义私有指令时，出现报错 Failed to resolve directive: xxxx

Vue.js — 关于在vue中创建自定义私有指令时，出现报错 Failed to resolve directive: xxxx

如上图一样，如果出现报错 Failed to resolve directive: xxxx（自定义指令名称），我当时在网上查找问题时，有的网友说的单词写错了，然后我检查了几遍，都发现不是单词写错了，后来测试了几遍不同的自定义名称后，发现并不是这个原因，这主要是命名时格式不对而导致出现错误。

	后来想想，居然是自定义名称，那就不可能会出现单词写错的可能。

	但是，在命名时我们应注意大小写，就像图片里面的自定义名称   fontweight 一样，而我在代码中是这样写的

<h4 v-fontweight="200">{{ msg }}</h4>

 <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '猥琐发育，别浪~ ~ ~',
                timer: null
            },
            methods: {
                lang(){
                    clearInterval(this.timer);
                    this.timer = setInterval(() => {                   
                    var start = this.msg.substring(0, 1);
                    var end = this.msg.substring(1);
                    this.msg = end + start;
                    }, 100)
                },
                stop() {
                    clearInterval(this.timer);
                },               
            },
            directives: {
                'fontWeight': {
                    bind: function(el, binding) {
                        el.style.fontWeight = binding.value;
                    }
                },
            }
        });
    </script>

在上面的代码里面 我的自定义名称是 fontWeight 这样的 采用了驼峰命名法。

而后我又做了几种测试，如下

第一种：

directives: {
               //这里以		color	为例，因为单词比较短，哈哈哈 ，
               //首先是全小写，可以运行 不报错 有效果
                'color': {
                    bind: function(el, binding) {
                        el.style.fontWeight = binding.value;
                    }
                },
            }

第二种：

directives: {，
               //首字母大写 其他字母小写，可以运行 不报错 有效果
                'Color': {
                    bind: function(el, binding) {
                        el.style.fontWeight = binding.value;
                    }
                },
            }

第三种：

directives: {
               //第二个字母大写 其他字母小写，不可以运行 报错 没效果
                'cOlor': {
                    bind: function(el, binding) {
                        el.style.fontWeight = binding.value;
                    }
                },
            }

以此类推，后面的都会报错
Failed to resolve directive: color （自定义名称）

总结

在创建自定义名称时，应注意大小写，不可采用驼峰命名法，会报错

（本人学的不多，遇到问题分享一下，如有需要补充，下方评论即可，感谢大家支持， 哈哈哈）！！！