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