记VUE的v-on:textInput无法执行事件的BUG
<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的更多相关文章
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- zTree默认勾选指定ID并执行事件
try { var arrs = $('#subjectClassID').val().split(","); var treeObj = $.fn.zTree.getZTreeO ...
- C#使用Timer.Interval指定时间间隔与指定时间执行事件
C#中,Timer是一个定时器,它可以按照指定的时间间隔或者指定的时间执行一个事件. 指定时间间隔是指按特定的时间间隔,如每1分钟.每10分钟.每1个小时等执行指定事件: 指定时间是指每小时的第30分 ...
- 老李推荐:第5章7节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 循环获取并执行事件 - runMonkeyCycles
老李推荐:第5章7节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 循环获取并执行事件 - runMonkeyCycles poptest是国内唯一一家培养测试开 ...
- js autocomplete输入延迟触发执行事件
需求:延迟查询,autocomplete延迟触发执行事件.当有下一个事件开始时,本次事件中断.目的是为了防止调用服务器过于频繁. var timeout = 0;//延时处理 $("#cus ...
- [C#.net]WinForm载入窗体完成后自动执行事件
一.以下是网络上可搜索到的次序 当 Windows Form 应用程序启动时,会以下列顺序引发主要表单的启动事件: System.Windows.Forms.Control.Handle ...
- mysql 自动执行事件
首先配置mysql的配置文件my.ini, 加上event_scheduler = 1 开启自动执行事件配置 demo drop event event_test; CREATE EVENT ev ...
- Vue父组件与子组件传递事件/调用事件
1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...
随机推荐
- SPFA求单源最短路径
序 求最短路径的算法有很多,各有优劣. 比如Dijkstra(及其堆(STL-priority_queue)优化),但是无法处理负环的情况: 比如O(n^3)的Floyd算法:比如Bellman-Fo ...
- 深度解析PHP数组函数array_combine
前些天写了一篇关于array_merge的函数解析. 今天来看一个新的函数array_combine() 此函数一共有两个参数,一个是合并后数组的键名,另一个为键值. 注意:合并后数组的键名放在第一个 ...
- web工作过程
了解浏览器与服务器进行通信和访问的过程 打开浏览器-输入URL地址 当我们访问一个网页时,如http://www.baidu.com,这个网址包含四个部分的内容: 1.第一部分:协议类型:这里是htt ...
- [.NET跨平台]Jeuxs独立版本的便利与过程中的一些坑
本文环境与前言 之前写过一篇相关的文章:在.NET Core之前,实现.Net跨平台之Mono+CentOS+Jexus初体验 当时的部署还是比较繁琐的,而且需要联网下载各种东西..有兴趣的可以看看, ...
- C. Friends
C. Friends 题意 对于任一点,求到此点距离不超过6的节点数. 分析 第一次dfs,形成一个以 1 为根的有向树,设 down[i][j] 为以i为根节点,距离 i 点距离不超过 j 的节点数 ...
- {网络编程}和{多线程}应用:基于UDP协议【实现多发送方发送数据到同一个接收者】--练习
要求: 使用多线程实现多发送方发送数据到同一个接收者 代码: 发送端:可以在多台电脑上启动发送端,同时向接收端发送数据 注意:匹配地址和端口号 package com.qf.demo; import ...
- 前端css要加的一些
编码格式 @charset "utf-8"; body的外边距设置 margin:0; 标签设置 form,ul,ol,li设置为padding:0; ul,ol,li设置为lis ...
- DNS域名解析的过程
一.主机解析域名的顺序 1.找缓存 2.找本机的hosts文件 3.找DNS服务器 注意: 配置IP和主机名时,要记得修改/etc/hosts文件,因为有些应用程序在主机内的进程之间通信的时候,会本机 ...
- NetCore1.1+Linux部署初体验
1.环境准备 Centaos7+Win10 虚拟机 Win10安装VS2017 https://www.asp.net/downloads注意勾选下.Net Core 3.Centaos安装netco ...
- AVAudioSession(2):定义一个 Audio Session
本文转自:AVAudioSession(2):定义一个 Audio Session | www.samirchen.com 本文内容主要来源于 Defining an Audio Session. A ...