溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程

發(fā)布時間：2020-08-19 20:47:36 來源：腳本之家 閱讀：220 作者：LGY_永 欄目：web開發(fā)

前言

最近在學習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，此函數(shù)傳入的事件名竟然是 textinput（正確為textInput,I是大寫，而不是小寫），錯誤就定位在這了；然后往上層繼續(xù)尋找（即父函數(shù)）

   注： (onRE.test(name))，var onRE = /^@|^v-on:/;  是通過匹配v-on添加事件

vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程

（2）processAttrs

vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程

.....然后傻傻地一層一層往下找，找到了getOuterHTML

vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程

vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程

/**
 * 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返回轉(zhuǎn)為小寫字母的代碼片段，導致了textInput轉(zhuǎn)為了 textinput，所以就執(zhí)行不了；

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手