Vue.directive 自定义指令的问题小结


Posted in Javascript onMarch 04, 2018

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。结果有惊喜的发现。

Vue.directive 自定义指令的问题小结

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.directive 自定义指令的问题小结,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js+xml生成级联下拉框代码
Jul 24 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
layui动态表头的实现代码
Aug 22 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
JavaScript图片处理与合成总结
Mar 04 #Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 #Javascript
编写React组件项目实践分析
Mar 04 #Javascript
Vue组件开发技巧总结
Mar 04 #Javascript
代码详解javascript模块加载器
Mar 04 #Javascript
Vue用v-for给src属性赋值的方法
Mar 03 #Javascript
vue中v-for加载本地静态图片方法
Mar 03 #Javascript
You might like
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
python fabric实现远程部署
2017/01/05 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
怎么样写好简历中的自我评价
2013/10/25 职场文书
专升本个人自我评价
2013/12/22 职场文书
趣味活动策划方案
2014/02/08 职场文书
中层干部培训方案
2014/06/16 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
世界环境日活动总结
2015/02/11 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
关于做家务的心得体会
2016/01/23 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫