vue.js中v-on:textInput无法执行事件问题的解决过程


Posted in Javascript onJuly 12, 2017

前言

最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后再遇到同样的问题,分享出来也方便遇到这个问题的朋友参考,下面话不多说了,来一起看看详细的介绍:

先来看这段示例代码

<div id="wrap">
  <input type="text" v-on:textInput="fn">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
  new Vue({
   el:'#wrap',
   methods:{
    fn:function(){
     console.log('textInput');
    }
   }
  });
</script>

寻找BUG原因步骤

(1)首先通过v-on关键字寻找到 addHandler,此函数传入的事件名竟然是 textinput(正确为textInput,I是大写,而不是小写),错误就定位在这了;然后往上层继续寻找(即父函数)

   注: (onRE.test(name)),var onRE = /^@|^v-on:/;  是通过匹配v-on添加事件

vue.js中v-on:textInput无法执行事件问题的解决过程

(2)processAttrs

vue.js中v-on:textInput无法执行事件问题的解决过程

.....然后傻傻地一层一层往下找,找到了getOuterHTML

vue.js中v-on:textInput无法执行事件问题的解决过程

vue.js中v-on:textInput无法执行事件问题的解决过程

/**
 * Get outerHTML of elements, taking care
 * of SVG elements in IE as well.
 */
function getOuterHTML (el) {
 if (el.outerHTML) {
 return el.outerHTML
 } else {
 var container = document.createElement('div');
 container.appendChild(el.cloneNode(true));
 return container.innerHTML
 }
}

真相大白了,因为vue是利用根原素outerHTML获取里面的dom片段(进行v-on匹配事件监听),然而outerHTML返回转为小写字母的代码片段,导致了textInput转为了 textinput,所以就执行不了;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
Vue实现购物车功能
Apr 27 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 #Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 #Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 #Javascript
js 监控iframe URL的变化实例代码
Jul 12 #Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 #Javascript
基于zepto.js实现手机相册功能
Jul 11 #Javascript
You might like
mysql 字段类型说明
2007/04/27 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
浅析is_writable的php实现
2013/06/18 PHP
jquery 问答知识整理
2010/02/11 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python使用turtle绘制分形树
2018/06/22 Python
Django 开发环境配置过程详解
2019/07/18 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
军训自我鉴定
2014/01/22 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
2014高考励志标语
2014/06/05 职场文书
食品安全演讲稿
2014/09/01 职场文书
房屋买卖协议样本
2014/11/16 职场文书
2014年度安全工作总结
2014/12/04 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android