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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
Vue实现双向数据绑定
May 03 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
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的错误信息
2006/10/09 PHP
php正则校验用户名介绍
2008/07/19 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
基于php实现的验证码小程序
2016/12/13 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
MySQL最常见的操作语句小结
2015/05/07 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
Python pymsql模块的使用
2020/09/07 Python
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
营销主管自我评价怎么写
2013/09/19 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
前台领班岗位职责
2013/12/04 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
实习生工作证明范本
2014/09/14 职场文书
事业单位个人总结
2015/02/12 职场文书
小学班主任教育随笔
2015/08/15 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
创业计划书之甜品店
2019/09/18 职场文书