设为首页 加入收藏

TOP

记VUE的v-on:textInput无法执行事件的BUG
2017-10-11 13:37:37 】 浏览:6442
Tags:VUE v-on:textInput 无法 执行 事件 BUG

 

<div id="wrap">
        <input type="text" v-on:textInput="fn">
</div>
<script type="text/java script" src="vue.js"></script>
<script type="text/java script">
        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,所以就执行不了;

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇js学习总结----设置元素的样式值s.. 下一篇Bootstrap提示框

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目