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 相关文章推荐
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
微信小程序删除处理详解
Aug 16 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
分析Python中解析构建数据知识
2018/01/20 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Django 外键的使用方法详解
2019/07/19 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
保险公司早会主持词
2014/03/22 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
初三毕业评语
2014/12/26 职场文书
教师辞职书范文
2015/02/26 职场文书
超市食品安全承诺书
2015/04/29 职场文书
投资合作意向书范本
2015/05/08 职场文书
初中体育课教学反思
2016/02/16 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
golang的文件创建及读写操作
2022/04/14 Golang
如何通过cmd 连接阿里云服务器
2022/04/18 Servers