vue之監(jiān)聽(tīng)器的使用案例詳解
第一種，用jquery的ajax發(fā)請(qǐng)求
用戶注冊(cè)時(shí)，判斷用戶名不能重復(fù)，可以用到監(jiān)聽(tīng)器。監(jiān)聽(tīng)器，用watch,需要監(jiān)聽(tīng)哪個(gè)值的變化，就把這個(gè)值，放在watch里面。
拿到新值，調(diào)用接口，去請(qǐng)求后端，判斷用戶名是否已存在。
此時(shí)，遇到的問(wèn)題，用戶刷新頁(yè)面的時(shí)候，并不會(huì)觸發(fā)監(jiān)聽(tīng)器，只是在username值發(fā)生變化的時(shí)候，才會(huì)觸發(fā)監(jiān)聽(tīng)器，改進(jìn)方法：將方法格式的偵聽(tīng)器改成對(duì)象格式的偵聽(tīng)器。
優(yōu)先推薦方法格式的監(jiān)聽(tīng)器(最簡(jiǎn)單)，如果刷新進(jìn)來(lái)就需要執(zhí)行一次，就定義成對(duì)象的監(jiān)聽(tīng)器。
當(dāng)一個(gè)對(duì)象有多個(gè)屬性的時(shí)候，我們必須用對(duì)象格式的監(jiān)聽(tīng)，如果需求對(duì)象任意一個(gè)屬性改變，都能觸發(fā)監(jiān)聽(tīng)器，就必須開(kāi)啟deep屬性
當(dāng)對(duì)象有多個(gè)屬性，開(kāi)啟deep:true。
如果要監(jiān)聽(tīng)的是對(duì)象的某個(gè)子屬性變化，則用下面的寫法：
總結(jié)：
到此這篇關(guān)于vue之監(jiān)聽(tīng)器的使用案例詳解的文章就介紹到這了,更多相關(guān)vue之監(jiān)聽(tīng)器的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue axios跨域 Request Method: OPTIONS問(wèn)題(預(yù)檢請(qǐng)求)
這篇文章主要介紹了解決vue axios跨域 Request Method: OPTIONS問(wèn)題(預(yù)檢請(qǐng)求)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue3實(shí)現(xiàn)下拉選擇框多選功能的方法詳解
在vue的實(shí)際開(kāi)發(fā)過(guò)程中,我們?nèi)绾螌⒁赃x中的值直接渲染到頁(yè)面中,下面這篇文章主要給大家介紹了關(guān)于Vue3實(shí)現(xiàn)下拉選擇框多選功能的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁(yè)指令的示例代碼
vue中監(jiān)控滾動(dòng)事件可以直接在mounted中綁定滾動(dòng)事件,然后在銷毀前解綁滾動(dòng)事件,本文通過(guò)實(shí)例代碼介紹vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁(yè)指令的過(guò)程,感興趣的朋友跟隨小編一起看看吧2023-10-10
本文主要介紹了解決vuex?數(shù)據(jù)丟失問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue?element?ui表格相同數(shù)據(jù)合并單元格效果實(shí)例
工作中遇到需要根據(jù)單元格某個(gè)屬性合并,特此記錄下,下面這篇文章主要給大家介紹了關(guān)于vue?element?ui表格相同數(shù)據(jù)合并單元格效果的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于vue路由傳參方式的方式總結(jié)及獲取參數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue頁(yè)面加載閃爍問(wèn)題的解決方法,文中給大家提到了v-if 和 v-show 的區(qū)別，解決vue頁(yè)面加載時(shí)出現(xiàn){{message}}閃退的兩種方法，感興趣的朋友一起看看吧2018-03-03
關(guān)于vue中如何監(jiān)聽(tīng)數(shù)組變化
這篇文章主要介紹了關(guān)于vue中如何監(jiān)聽(tīng)數(shù)組變化，對(duì)vue感興趣的同學(xué)，必須得參考下2021-04-04
這篇文章主要介紹了vue如何監(jiān)聽(tīng)頁(yè)面緩存事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05