Vue.directive 自定义指令的问题小结
更新时间：2018年03月04日 14:11:19 作者：文方草
这篇文章主要介绍了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.最后输出页面，完美...小问题，要注意。
总结
以上所述是小编给大家介绍的Vue.directive 自定义指令的问题小结，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要给大家介绍了关于vuex使用方法的相关资料,主要内容包括Vuex的安装和配置,以及如何在.vue文件中引入和使用Vuex状态,作者还分享了一种在模块中存储状态的建议方法,并提供了具体的代码示例,需要的朋友可以参考下2024-10-10
众所周知Axios是一个基于promise的HTTP库,可以用在浏览器和 node.js中,下面这篇文章主要给大家介绍了关于vue2中使用axios及axios拦截器的配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要为大家介绍了Vue3+vueuse实现放大镜示例过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Vue 计算属性 computed，一般情况下属性都是放到data中的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性，下面我们来看看具体实例,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了vue-cli4.0多环境配置变量与模式详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了加速vue组件渲染之性能优化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
粘贴可用的element-ui validateField局部校验
这篇文章主要为大家介绍了粘贴可用element-ui中validateField局部校验示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
vue中的rules表单校验规则使用方法示例详解 :rules=“rules“
这篇文章主要介绍了vue中的rules表单校验规则使用方法示例详解 :rules=“rules“,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了Vue和原生JS中如何使用自定义字体,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下2024-01-01
Vue ElementUI实现:限制输入框只能输入正整数的问题
这篇文章主要介绍了Vue ElementUI实现:限制输入框只能输入正整数的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论