<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添加事件

(2)processAttrs

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

/**
* 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,所以就执行不了;

记VUE的v-on:textInput无法执行事件的BUG的更多相关文章

  1. vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  2. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

  3. zTree默认勾选指定ID并执行事件

    try { var arrs = $('#subjectClassID').val().split(","); var treeObj = $.fn.zTree.getZTreeO ...

  4. C#使用Timer.Interval指定时间间隔与指定时间执行事件

    C#中,Timer是一个定时器,它可以按照指定的时间间隔或者指定的时间执行一个事件. 指定时间间隔是指按特定的时间间隔,如每1分钟.每10分钟.每1个小时等执行指定事件: 指定时间是指每小时的第30分 ...

  5. 老李推荐:第5章7节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 循环获取并执行事件 - runMonkeyCycles

    老李推荐:第5章7节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 循环获取并执行事件 - runMonkeyCycles   poptest是国内唯一一家培养测试开 ...

  6. js autocomplete输入延迟触发执行事件

    需求:延迟查询,autocomplete延迟触发执行事件.当有下一个事件开始时,本次事件中断.目的是为了防止调用服务器过于频繁. var timeout = 0;//延时处理 $("#cus ...

  7. [C#.net]WinForm载入窗体完成后自动执行事件

    一.以下是网络上可搜索到的次序 当 Windows Form 应用程序启动时,会以下列顺序引发主要表单的启动事件:        System.Windows.Forms.Control.Handle ...

  8. mysql 自动执行事件

    首先配置mysql的配置文件my.ini,  加上event_scheduler = 1  开启自动执行事件配置 demo drop event event_test; CREATE EVENT ev ...

  9. Vue父组件与子组件传递事件/调用事件

    1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...

随机推荐

  1. ES学习笔记

    ES学习 1. 安装 1.1 ES 安装配置 curl -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5. ...

  2. 分布式版本控制git常见问题之gitignore冲突(精简版)

    上次写的的太模糊了,现在简单直接写出个人心得,如下: 原因是有人提交了.gitignore里面的内容,所以和本地的不一样,这样就有问题,那么pull都不可以,所以要这样: git update-ind ...

  3. Graphical Analysis of German Parliament Voting Pattern

    We use network visualizations to look into the voting patterns in the current German parliament. I d ...

  4. 解决shiro和quartz2 版本冲突问题

    修改build.gradle   compile ("org.quartz-scheduler:quartz:2.2.3") compile ("org.apache.s ...

  5. HttpClien Get&Post

    新公司上班第二周,开始进军.Net Core,这方面的东西比较新,所以已经封装好的东西比较少,比如HttpClien之类的开源类库,找了NuGet好久,没有找到,所以先写个简陋的来用着先. 引用: u ...

  6. go服务端----使用dotweb框架搭建简易服务

    使用dotweb框架搭建简易服务 go语言web框架挺多的,所谓琳琅满目,里面也有很多优秀的,比如echo.beego等,但体验下来,总是觉得哪里有点小疙瘩,后来才明白过来,echo太简单,很多日常使 ...

  7. 关于Oracle、SqlServer 的sql递归查询

    递归查询所有子节点 建人员表  hrmresource 主键     姓名   上级ID 层级关系:- 4      - 3           - 2                - 1      ...

  8. 原生ajax异步请求基础知识

    一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请 ...

  9. Redis数据类型之List(三)

         前言:list即链表,它是一个能维持数据先后顺序的列表,便于在表的两端追加和删除数据,中间位置的存取具有O(N)的时间复杂度,是一个双向链表. 一.内部原理            redis ...

  10. python_adb 图形界面获取app测试数据,并展示部分测试报告v1.0版本

    想到平时想用adb 我就忍不住去翻开笔记,脑子记不住,不好使,不知道大家有没有这个想法呢,不管你有没有,反正我有了,ttm,太烦人了,于是乎,我就开始给自己写个需求文档, 这就是我写的,产品需求,合理 ...