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 使用手册(五)
Sep 23 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
js实现双色球效果
Aug 02 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
PHP可变函数的使用详解
2013/06/14 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
php实现文件上传基本验证
2020/03/04 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
js精度溢出解决方案
2012/12/02 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
python使用KNN算法识别手写数字
2019/04/25 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
迎接领导欢迎词
2014/01/11 职场文书
少先队入队活动方案
2014/02/08 职场文书
小学生优秀评语大全
2014/04/22 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
英语教师个人工作总结
2015/02/09 职场文书
保护校园环境倡议书
2015/04/28 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android