<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. js实现超出一定字数隐藏并用省略号"..."代替,点击后又可进行展开和收起,

    原理简单阐述:放两个一模一样的div,把你要展示的文字放进去.页面初始化的时候,第一个div展示,第二个 div隐藏,就是这么简单.(ps:可以直接复制代码到你自己项目中,查看效果) 样式部分(记得引 ...

  2. AtomicInteger的使用

    JDK API 1.7相关介绍 可以用原子方式更新的 int 值.有关原子变量属性的描述,请参阅 java.util.concurrent.atomic 包规范.AtomicInteger 可用在应用 ...

  3. 小程序API录音后Silk格式转码MP3

    问题 客户端使用小程序,需要录音功能然后到后台页面播放,由于微信提供的录音API压缩后的格式为 .silk格式的,但是这个格式其他播放器都是播放不了的,更何况html页面的audio标签更是不可能播放 ...

  4. Android Weekly Notes Issue #258

    Android Weekly Issue #258 May 21st, 2017 Android Weekly Issue #258 本期内容: 围绕着Google I/O的热潮, 本周的posts除 ...

  5. 网络编程2之Socket简介和java.net包

    一.Socket 通信链路的端点就被称为"套接字"(英文名Socket) 是提供给应用程序的接口 图文说明Socket Socket通信原理 二.java.net包 Java.ne ...

  6. mac下sublime text3 安装px转rem插件

    本人使用的是os-x系统,即mac系统,每次使用单位rem用其他网页转换很不方便.自己捣腾了一下插件,现在共享给大家 第一步: 先下载插件: https://github.com/narrow-gat ...

  7. SurfaceView的基本使用

    一.引入: Android提供了View来进行绘图处理,在大部分情况下,View都能满足绘图需求.大家都知道View是通过刷新来重绘视图,Android系统通过发出VSYNC信号来进行屏幕的重绘,刷新 ...

  8. Mac OS 的命令行 总结

    du 命令 查看目录下所有文件的大小: du -sh * ls 命令 直接显示当前目录下的所有的非隐藏文件: ls // 怎么在文章中显示不出来?? 显示当前目录下的所有的文件(包括隐藏的): ls ...

  9. html5中cookie介绍,封装以及添加,获取,删除

    cookie是储存在用户本地终端上的数据. 在我们登陆网站时有记录密码,也有时间限制比如说7天,5天等等这都是我们利用cookie来写的, 这就是利用了cookie的会话周期,但cookie同时又是不 ...

  10. php调用java

    PHP调用JAVA方式 1.     背景 在开发招商银行信用卡分期付款功能过程中,在支付成功之后需要对银行的返回数据进行签名验证,因签名加密方式招商银行是不提供的,只提供了相应的JAVA验证类测试例 ...