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

序

最近在学习vue.js框架的过程中遇到了一些问题，所以把遇到问题的解决过程写下来，避免以后遇到同样的问题，分享给遇到这个问题的朋友。下面的话不多。说罢，我们来看看详细的介绍：

让我们先看看这个示例代码

div id=' wrap ' input type=' text ' v-: textInput=' fn '/div script type=' text/JavaScript ' src=' http : 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-:/；通过匹配v-on添加事件

(2)流程图

.然后愚蠢地一层一层往下看，发现了getOuterHTML

/** *获取元素的外部HTML，同时注意IE中的SVG元素。*/函数GetOuthHTML(El){ if(El . OuthHTML){ return El . OuthHTML } else { var container=document . create element(' div ')；container . appendchild(El . clonenode(true))；return container.innerHTML }}的真相大白，因为vue使用根原语outhtml获取里面的dom片段(监控v-on匹配事件)，但是outhtml返回转换成小写字母的代码片段，导致textinput转换成textInput，所以无法执行；

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。