快捷導航

vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題

更新時間：2022年03月28日 14:30:14 作者：SnailsRocket

這篇文章主要介紹了vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue項目中使用button綁定click事件

事件無法觸發(fā)methods中的方法解決辦法

事故還原

小胖做完公司的項目，老大看著小胖疲憊的臉龐，有點心疼小胖，就給小胖放了三天假，沒有給小胖新的需求。小胖平常主要是寫的后端，但是最近跟小順子有點聊技術(shù)，小順子經(jīng)常把Vue掛在嘴邊，小胖有點不服氣，正好最近也有時間，打算利用這三天把Vue入個門，但是剛開始就把小胖給難住了，小胖寫了一個button，并綁定了click點擊事件，但是發(fā)現(xiàn)無法觸發(fā)methods中的but方法，異常提示信息大致的意思是but_ajax未定義。

瀏覽器console顯示異常信息

but_ajax is not defined
at HTMLButtonElement.onclick

出了bug但是小胖的內(nèi)心毫無波動，腦袋里想起了公司架構(gòu)師老王經(jīng)常說的一句話，遇到bug不要慌，解bug才是程序員最快的成長方式(但是下面遇到了三個基礎(chǔ)性的錯誤小胖還是有點尷尬的)

端口綁定異常，這個異常說明就是端口已經(jīng)被綁定了(后端是我之前寫好的，我準備將端口改成4200，但是4200已經(jīng)在運行angular項目)

java.net.BindException: Address already in use: bind

跨域問題

這個項目前端的路徑是localhsot:63342 ,然后后端的路徑的localhost:28089 ,前端發(fā)送ajax的時候url路徑需要帶上接口，這個是跨域必須的，然后后端需要配置跨域信息(添加注解@CrossOrigin(origin={“前端的url”})，或者編寫一個config類)

vue button (特別注意) 犯了一個很沙雕的錯誤，浪費一個小時

vue 中button 的點擊事件

<button v-on:click="but_click">發(fā)送請求</button>

js 中 button點擊事件

<button onclick="but_click">發(fā)送請求</button>

剛開始小胖犯了一個很沙雕的錯誤，在vue的methods中定義一個點擊事件的方法，但是在中使用的是js的onclick事件，所以就出現(xiàn)找不到method，js的點擊事件對應(yīng)的方法，直接寫在script中，放在methods中不會被識別

<script>
?? ?but_ajax = function() {
? ? $.get(url).then(response => {
? ? ? ? this.tableData = response;
? ? })
}
</script>

userData is not defined

在 data中定義了 userData ，但是出現(xiàn)異常如下,異常信息說明userData沒有定義，但是我們明明在data中定義過了，小胖我思前想后，發(fā)現(xiàn)我又寫了一個沙雕的bug，userData是vue對象中的data里面定義的，要想使用，必須使用this關(guān)鍵字，this指代的是vue對象。

Uncaught ReferenceError: userData is not defined

Vue的第四個bug 鉤子函數(shù)(mounted/created)

小胖有一個想法，就是在頁面加載的時候，直接發(fā)送ajax請求，然后將數(shù)據(jù)顯示在table中(table 是使用的el-table ElementUI的組件)，小胖想著鉤子函數(shù)也是一個method，所以想當然的把created(mounted) 放在methods里面，結(jié)果發(fā)現(xiàn)沒有效果，這個時候小胖想肯定是鉤子函數(shù)沒有執(zhí)行，應(yīng)該是沒有被瀏覽器識別，小胖就直接懷疑鉤子函數(shù)是不是放錯位置了，小胖試著將鉤子函數(shù)(mounted/created)跟el、data、methods放在同一級，然后重新啟動項目，效果出來了。

Vue的第五個bug

鉤子函數(shù)發(fā)送ajax獲取數(shù)據(jù)，放回到表單中，這里有一個明顯的延時，數(shù)據(jù)要過將近1s才顯示，出現(xiàn)過兩次，后面基本上在200ms左右，這里因為我的element.css elementui.js以及vue.js都是在放在本地，不是去請求網(wǎng)絡(luò)，所以速度稍微快一點。(如果面試問道怎么優(yōu)化頁面響應(yīng)速度的話，可以說將js,css文件使用min版的，然后使用離線文件，(一般企業(yè)開發(fā)，開發(fā)階段可能使用網(wǎng)絡(luò)文件，但是生產(chǎn)環(huán)境都是使用離線文件))

小結(jié)：寫一個簡單的vue 按鈕，出現(xiàn)了跨域、vue與js的點擊事件混用、vue中data的調(diào)用，這三個bug，發(fā)現(xiàn)對一些基礎(chǔ)知識的理解差很多，平常還是需要多敲，多敲確實可以快速成長，但是需要將基礎(chǔ)的東西過一遍再去敲，去琢磨才可以事半功倍，看似簡單的需求，居然花了兩個小時找bug，至此Vue算是邁進了門，但是后面的路還有很長。