Vue項(xiàng)目中使用button綁定click事件

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

事故還原

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

瀏覽器console顯示異常信息

but_ajax is not defined
    at HTMLButtonElement.onclick

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

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

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

跨域問題

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

vue button (特別注意) 犯了一個(gè)很沙雕的錯(cuò)誤，浪費(fèi)一個(gè)小時(shí)

vue 中button 的點(diǎn)擊事件

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

js 中 button點(diǎn)擊事件

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

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

<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)我又寫了一個(gè)沙雕的bug，userData是vue對(duì)象中的data里面定義的，要想使用，必須使用this關(guān)鍵字，this指代的是vue對(duì)象。

Uncaught ReferenceError: userData is not defined

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

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

Vue的第五個(gè)bug

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

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

vue @click失效問題

鑒于我這只豬花了半天時(shí)間重寫代碼

所以寫這篇隨筆

紀(jì)念我白白逝去半天時(shí)光

貼代碼（直接截圖）

怎么看都沒有問題，我這只豬一遍一遍認(rèn)認(rèn)真真敲了好多遍

最后找到了問題所在：

頁面中使用了better-scroll，自動(dòng)禁用了click事件，其實(shí)之前好像沒有這種情況，后續(xù)會(huì)研究一下的

解決方法

給加個(gè)click: true就好了

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論