vue之監(jiān)聽器的使用案例詳解
第一種，用jquery的ajax發(fā)請求
用戶注冊時(shí)，判斷用戶名不能重復(fù)，可以用到監(jiān)聽器。監(jiān)聽器，用watch,需要監(jiān)聽哪個(gè)值的變化，就把這個(gè)值，放在watch里面。
拿到新值，調(diào)用接口，去請求后端，判斷用戶名是否已存在。
此時(shí)，遇到的問題，用戶刷新頁面的時(shí)候，并不會觸發(fā)監(jiān)聽器，只是在username值發(fā)生變化的時(shí)候，才會觸發(fā)監(jiān)聽器，改進(jìn)方法：將方法格式的偵聽器改成對象格式的偵聽器。
優(yōu)先推薦方法格式的監(jiān)聽器(最簡單)，如果刷新進(jìn)來就需要執(zhí)行一次，就定義成對象的監(jiān)聽器。
當(dāng)一個(gè)對象有多個(gè)屬性的時(shí)候，我們必須用對象格式的監(jiān)聽，如果需求對象任意一個(gè)屬性改變，都能觸發(fā)監(jiān)聽器，就必須開啟deep屬性
當(dāng)對象有多個(gè)屬性，開啟deep:true。
如果要監(jiān)聽的是對象的某個(gè)子屬性變化，則用下面的寫法：
總結(jié)：
到此這篇關(guān)于vue之監(jiān)聽器的使用案例詳解的文章就介紹到這了,更多相關(guān)vue之監(jiān)聽器的使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在vue項(xiàng)目中,和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,下面這篇文章主要給大家介紹了關(guān)于Vue3引入axios封裝接口的兩種方法,需要的朋友可以參考下2022-10-10
uni-app無限級樹形組件簡單實(shí)現(xiàn)代碼
文章介紹了如何在uni-app中簡單封裝一個(gè)無限級樹形組件,該組件可以無線嵌套,展開和收縮,并獲取子節(jié)點(diǎn)數(shù)據(jù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
Vue(element ui)中操作row參數(shù)的使用方式
這篇文章主要介紹了Vue(element ui)中操作row參數(shù)的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)
這篇文章主要介紹了vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vite?vue3多頁面入口打包以及部署踩坑實(shí)戰(zhàn)
因?yàn)槲覀児镜捻?xiàng)目是多頁面應(yīng)用,不同于傳統(tǒng)單頁面應(yīng)用,一個(gè)包就可以了,下面這篇文章主要給大家介紹了關(guān)于Vite?vue3多頁面入口打包以及部署踩坑的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue3+echarts實(shí)現(xiàn)好看的圓角環(huán)形圖
這篇文章主要介紹了vue3+echarts實(shí)現(xiàn)好看的圓角環(huán)形圖效果,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
循環(huán)使用v-for指令,v-for指令需要以site in sites形式的特殊語法,sites是源數(shù)據(jù)數(shù)組并且site是數(shù)組元素迭代的別名,下面這篇文章主要給大家介紹了關(guān)于Vue中v-for列表循環(huán)的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue測試環(huán)境打包與生產(chǎn)環(huán)境打包文件數(shù)量不一致解決方案
這篇文章主要為大家介紹了vue測試環(huán)境打包與生產(chǎn)環(huán)境打包文件數(shù)量不一致的解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)
這篇文章主要介紹了element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
ElementPlus 中el-select自定義指令實(shí)現(xiàn)觸底加載請求options數(shù)據(jù)的方法
觸底時(shí),繼續(xù)向后端發(fā)請求獲取下一頁的數(shù)據(jù),請求回來的數(shù)據(jù)合并給options,這篇文章主要介紹了ElementPlus 中el-select自定義指令實(shí)現(xiàn)觸底加載請求options數(shù)據(jù)的操作方法,需要的朋友可以參考下2024-08-08