• 记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,所以就执行不了;

  • 相关阅读:
    kafka 安装和基本操作
    IPv6表示方法及其简化方法
    Python print输出函数
    同步工具之Vector X
    golang之热加载Fresh&air X
    TOML 1.0格式语法 X
    PHPstorm配置webserver X
    编程辅助工具之Kite X
    golang项目之Makefile X
    高性能消息队列之nsq X
  • 原文地址:https://www.cnblogs.com/focuslgy/p/7152995.html
Copyright © 2020-2023  润新知