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 相关文章推荐
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
canvas多重阴影发光效果实现
Apr 20 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
PHP中常用数组处理方法实例分析
2008/08/30 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
用jscript实现列出安装的软件列表
2007/06/18 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python字典的值可以修改吗
2020/06/29 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
大学生咖啡店创业计划书
2014/01/21 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
药店收银员岗位职责
2015/04/07 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python