zoukankan      html  css  js  c++  java
  • 记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,所以就执行不了;

  • 相关阅读:
    项目进度管理-PMBook 第六章
    项目范围管理-PMBook 第五章
    PMBook 中的开发生命周期
    项目整合管理-PMBook 第四章
    PMP 学习心得
    二维码的来源和生活应用
    package main 红色波浪线
    JS中监听事件的几种方法
    PEP8规范
    RestFul API 规范
  • 原文地址:https://www.cnblogs.com/focuslgy/p/7152995.html
Copyright © 2011-2022 走看看