前言

最近在學(xué)習(xí)vue.js框架，學(xué)習(xí)過(guò)程中遇到一些問(wèn)題，所以記下其中遇到問(wèn)題的解決過(guò)程，避免以后再遇到同樣的問(wèn)題，分享出來(lái)也方便遇到這個(gè)問(wèn)題的朋友參考，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹：

先來(lái)看這段示例代碼

<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）首先通過(guò)v-on關(guān)鍵字尋找到 addHandler，此函數(shù)傳入的事件名竟然是 textinput（正確為textInput,I是大寫，而不是小寫），錯(cuò)誤就定位在這了；然后往上層繼續(xù)尋找（即父函數(shù)）

   注： (onRE.test(name))，var onRE = /^@|^v-on:/;  是通過(guò)匹配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 }}

真相大白了，因?yàn)関ue是利用根原素outerHTML獲取里面的dom片段（進(jìn)行v-on匹配事件監(jiān)聽），然而outerHTML返回轉(zhuǎn)為小寫字母的代碼片段，導(dǎo)致了textInput轉(zhuǎn)為了 textinput，所以就執(zhí)行不了；

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。