vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程
前言
最近在學(xué)習(xí)vue.js框架，學(xué)習(xí)過程中遇到一些問題，所以記下其中遇到問題的解決過程，避免以后再遇到同樣的問題，分享出來也方便遇到這個(gè)問題的朋友參考，下面話不多說了，來一起看看詳細(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是大寫，而不是小寫），錯(cuò)誤就定位在這了；然后往上層繼續(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é)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue獲取時(shí)間戳轉(zhuǎn)換為日期格式代碼實(shí)例
這篇文章主要介紹了vue獲取時(shí)間戳轉(zhuǎn)換為日期格式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在Vue.js的開發(fā)過程中,組件方法的定義和調(diào)用是非常常見的,有時(shí)候,為了響應(yīng)事件或其他操作,我們需要在組件的方法中使用匿名函數(shù),本文將深入探討如何在Vue組件的方法中加載和使用匿名函數(shù),并提供詳細(xì)的代碼示例和解釋,幫助開發(fā)者更好地理解和應(yīng)用這些技術(shù)2024-09-09
使用Vue和Firebase實(shí)現(xiàn)后臺(tái)數(shù)據(jù)存儲(chǔ)的示例代碼
在現(xiàn)代 web 應(yīng)用開發(fā)中,前端和后端的無縫協(xié)作至關(guān)重要,借助 Firebase 等云計(jì)算解決方案,前端開發(fā)者可以輕松實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)與實(shí)時(shí)更新,本文將為大家詳細(xì)介紹如何利用 Vue 3 的 Composition API 和 Firebase 實(shí)現(xiàn)后臺(tái)數(shù)據(jù)存儲(chǔ),需要的朋友可以參考下2024-10-10
使用Element進(jìn)行前端開發(fā)的詳細(xì)圖文教程
眾所周知Element是一套Vue.js后臺(tái)組件庫(kù),它能夠幫助你更輕松更快速地開發(fā)后臺(tái)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于使用Element進(jìn)行前端開發(fā)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
本文主要介紹了Vue3里的EffectScope，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了VUE插件vue-treeselect的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-07-07
這篇文章主要介紹了記一次用vue做的活動(dòng)頁(yè)的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
TagsInput 是一種可編輯的輸入框，通過回車或者分號(hào)來分割每個(gè)標(biāo)簽，用回退鍵刪除上一個(gè)標(biāo)簽。這篇文章主要介紹了vue組件TagsInput的相關(guān)知識(shí),需要的朋友可以參考下2020-05-05
vue在線預(yù)覽word、excel、pdf、txt、圖片的方法實(shí)例
最近工作中遇到了一個(gè)需要在線預(yù)覽文件的需求,所以這篇文章主要給大家介紹了vue在線預(yù)覽word、excel、pdf、txt、圖片的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
VUE?Element修改el-input和el-select長(zhǎng)度的具體步驟
這篇文章主要給大家介紹了關(guān)于VUE?Element修改el-input和el-select長(zhǎng)度的具體步驟,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12