vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程
更新時間：2017年07月12日 09:17:34 作者：LGY_永
大家都知道vue.js通過v-on完成事件處理與綁定，但最近使用v-on的時候遇到了一個問題，所以下面這篇文章主要給大家介紹了關于vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程，需要的朋友可以參考下。
前言
最近在學習vue.js框架，學習過程中遇到一些問題，所以記下其中遇到問題的解決過程，避免以后再遇到同樣的問題，分享出來也方便遇到這個問題的朋友參考，下面話不多說了，來一起看看詳細的介紹：
先來看這段示例代碼
<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是大寫，而不是小寫），錯誤就定位在這了；然后往上層繼續(xù)尋找（即父函數）
注： (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匹配事件監(jiān)聽），然而outerHTML返回轉為小寫字母的代碼片段，導致了textInput轉為了 textinput，所以就執(zhí)行不了；
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
這篇文章主要介紹了Vue使用Proxy代理后仍無法生效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在寫大文件上傳時,碰到關于 vue2 跟 vue3 對在循環(huán)中使用異步,并動態(tài)把普通對象添加進響應式數據,在異步前后修改該普通對象的某個屬性,導致 vue2 跟 vue3 的視圖更新不一致,引發(fā)一系列的思考,所以本文介紹了Vue3響應式對象數組不能實時DOM更新問題解決辦法2024-07-07
當構建的項目比較大的時候,懶加載可以分割代碼塊,提高頁面的初始加載效率解決白屏問題,下面是幾種常見vue路由懶加載的方法,感興趣的朋友跟隨小編一起看看吧2023-11-11
這篇文章主要介紹了安裝Vue+webpack出現的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue+ElementUI?實現分頁查詢-mysql數據，當數據庫中數據比較多時,就每次只查詢一部分來緩解服務器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句，實現分頁查詢mysql數據,下面來看看具體實現過程,希望對大家學習有所幫助2021-12-12
這篇文章主要介紹了vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue--vuex的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了關于vue項目中搜索節(jié)流的實現代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
網頁中滑動圖片驗證一直是各大網站、移動端的主流校驗方式，其主要作用是為了區(qū)分人和機器以及為了防止機器人程序暴力登錄或攻擊從而設置的一種安全保護方式，這篇文章主要介紹了vue?實現左滑圖片驗證,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中的主動觸發(fā)點擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04