vue的自定义指令含大写字母会失效

<div id="app">
    <p v-colorRed>这是一行文字</p>
</div>

Vue.directive("colorRed",{
        bind: function (el) {
            el.style.color = 'red';
        }
});

上面的例子代码并不能使文字颜色变红, 这是因为指令名中含有大写字母

原理:

html5规范规定, 写在html标签中的属性必须是小写(如果在JS中则是驼峰命名), 所以vue应该也是遵循这一规定, v-colorRed其实会转成v-colorred

所以directive函数的第一个参数改为"colorred"就行了.