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 自定义指令的问题小结，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
在本篇文章里小编给大家整理了一篇关于Vue中使用计算属性的知识点总结内容，对此有兴趣的朋友们可以跟着学习参考下。2021-12-12
这篇文章主要介绍了vue中和小程序中使用iconfont的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次,在Vue中使用防抖函数可以避免在频繁触发的事件中重复执行操作,这篇文章主要介绍了vue中使用lodash的debounce防抖函数,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue中输入框事件的使用及数值校验方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue中的v-touch事件用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了使用VUE实现一键复制内容功能,功能就是当我们点击复制按钮时，会提示“复制成功”，这样复制的内容就可以在其他地方使用了，感兴趣的朋友可以学习一下2023-04-04
这篇文章主要给大家介绍了关于Vue中router-view无法显示的解决办法,router-view组件作为vue最核心的路由管理组件,在项目中作为路由管理经常被使用到,需要的朋友可以参考下2023-07-07
解决ant-design-vue中menu菜单无法默认展开的问题
这篇文章主要介绍了解决ant-design-vue中menu菜单无法默认展开的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue 列表过滤与排序的实现，文章围绕主题展开详细的内容介绍，具有一定的参考价值需要的小伙伴可以参考一下2022-05-05
这篇文章主要为大家详细介绍了Vue生命周期和数据共享，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
最新评论