- 所在位置：
- 首頁 >
- 編程技術(shù) >
- JavaScript >
- Vue.js學(xué)習(xí)有哪些坑要注意，如何更好使用vue框架
Vue.js學(xué)習(xí)有哪些坑要注意，如何更好使用vue框架
Admin 2022-06-01 群英技術(shù)資訊 803 次瀏覽
這篇文章主要介紹“Vue.js學(xué)習(xí)有哪些坑要注意，如何更好使用vue框架”，有一些人在Vue.js學(xué)習(xí)有哪些坑要注意，如何更好使用vue框架的問題上存在疑惑，接下來小編就給大家來介紹一下相關(guān)的內(nèi)容，希望對大家解答有幫助，有這個方面學(xué)習(xí)需要的朋友就繼續(xù)往下看吧。排名不分先后
最近好像都是只發(fā)了一些生活類，吐槽的一些 blog，不更新點技術(shù)相關(guān)的 可能有人會覺得 這家伙肯定又在偷懶了。
那么 好 我要開始裝逼了
類空指向
就是類似于空指針的一種錯誤方式 不會在 console 上報錯 非常難找的問題
resp.data.user.avatar
//如果這個user是null的話 這么調(diào)用不會報錯 也不會向下執(zhí)行 非?？?
//如果你想判斷這個avatar的話 要這么做
if(resp.data.user && resp.data.user.avatar){
//do...
}
ES6 箭頭函數(shù)
箭頭函數(shù)和非箭頭函數(shù)也是有很大區(qū)別的
//普通匿名函數(shù)寫法
api()
.then(function(resp){
this.count()
//注意這個this 不是能正常使用的 count會是個undefined
})
//ES6 箭頭函數(shù)
api()
.then(resp => {
this.count()
//這里沒毛病
})
vuetify
這是一個基于 Google Material 設(shè)計語言的 UI 框架，可以在 Vue.js 運行。
只是安裝方式有點特殊，并且它的插件安裝方式也很特殊。
例如 vuetify 的 dialog
import VuetifyDialog from 'vuetify-dialog'
import vuetify from './plugins/vuetify';
Vue.use(VuetifyDialog, {
context: {
vuetify
}
})
這就導(dǎo)致你寫 UI 的時候 要面向 Google 編程。（雖說其他后端語言也差不多 笑）
vue-cli
如果你是要新創(chuàng)建一個項目，并且這個項目規(guī)模不是特別大。
我非常推薦你使用 vue-cli 創(chuàng)建，說簡單點兒 這會提升 b 格。
廢話少說 上圖
vue create your_project_name vue ui
vue ui 會打開一個可視化頁面 像是上圖那樣。
然后在里面導(dǎo)入由 vue-cli 創(chuàng)建的項目就可以和上圖一樣了 :)
異步和同步
其實之前有個非常蠢的想法。
就是在用戶輸完表單之后，立即和服務(wù)器進行驗證，然后將結(jié)果刷新到 UI 上。
但是這個刷新 UI 需要一個同步操作。
我就一個勁的折騰怎么去搞定將 axios 的異步操作變成同步。
如果是之前的 jQuery 就非常簡單么 只需要將里面的 aysnc 屬性改掉就可以了。
但是你每次發(fā)請求 瀏覽器都會在 console 上提示 不推薦 XHR 同步請求。
為啥呢，因為瀏覽器里面頁面是單線程的，如果你的請求是同步的，那么就會導(dǎo)致每個請求都會讓頁面卡住一定的時間。
所以我最后還是改成了逐步驗證的方式 讓所有的請求都是異步操作的。
運行和部署
如果你本地開發(fā)
運行 serve(有些項目是 dev) 會開放一個端口號 讓你訪問用戶界面，并進行接近實時的 UI 調(diào)整。
如果你是要部署到線上 需要先執(zhí)行 build 會在輸出目錄里面生成靜態(tài)文件。
再把這些文件部署到服務(wù)器上 像是：
- nginx
- caddy
這里我非常推薦 caddy，它是一個基于 golang 開發(fā)的服務(wù)器，部署輕量化，并且?guī)в泄芾?api，非常良好的支持 Http2，并且 支持 http3。
TIPS
這里只記錄一些剛開始玩的項目，在后面的開發(fā)里，還會遇到更多問題。
例如頁面之間的刷新，等等等等。
以上就是關(guān)于“Vue.js學(xué)習(xí)有哪些坑要注意，如何更好使用vue框架”的介紹了，感謝各位的閱讀，如果大家想要了解更多相關(guān)的內(nèi)容，歡迎關(guān)注群英網(wǎng)絡(luò)，小編每天都會為大家更新不同的知識。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
Vite處理postcss的操作及過程是怎樣
這篇文章主要為大家介紹了使用Vite處理css?less及postcss的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
-
TypeScript如何聲明函數(shù)重載，各種函數(shù)重載情況是怎樣
問題：TypeScript 中為函數(shù)添加多個簽名后，依然需要添加相應(yīng)的代碼來判斷并從不同的簽名參數(shù)列表中獲取對應(yīng)的參數(shù)。過去常見的寫法：function refEventEmitter(event?: string): void;function refEventEmitter(event: string, callb
-
vue實現(xiàn)側(cè)邊滑出菜單欄的方法是什么？
這篇文章給大家分享的是有關(guān)ue實現(xiàn)側(cè)邊滑出菜單欄的內(nèi)容，這里是使用vue-drawer-layout實現(xiàn)手勢滑出菜單欄這個效果，具體實現(xiàn)效果及代碼如下，小編覺得挺實用的，因此分享給大家做個參考，接下來一起跟隨小編看看吧。
-
JavaScript組合函數(shù)的用法是什么，有什么要注意的
經(jīng)歷過一些列的函數(shù)式編程思想的學(xué)習(xí)總結(jié)，一些重要的高階函數(shù)的學(xué)習(xí)，以及前一段時間關(guān)于 RxJS 的學(xué)習(xí)。我們再回看一次 —— 組合函數(shù) compose本瓜越來越覺得，【易讀】的代碼應(yīng)該是將聲明和調(diào)用分開來的。根據(jù)不同的流程，用函數(shù)組合的方式、也可以說它是管道、或者說是鏈?zhǔn)秸{(diào)用，將聲明的函數(shù)組合起來，再等待時機進行調(diào)用。
-
ECharts中圖例組件有何用，用法是什么
圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol),顏色和名字,可以通過點擊圖例控制哪些系列不顯示,這篇文章主要給大家介紹了關(guān)于Echarts圖例組件的相關(guān)資料,需要的朋友可以參考下
推薦內(nèi)容
- CSS中flex布局如何實現(xiàn)自動換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標(biāo)？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
成為群英會員,開啟智能安全云計算之旅
立即注冊關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時售前：400-678-4567
7x24小時售后：0668-2555666
24小時QQ客服
群英微信公眾號
CNNIC域名投訴舉報處理平臺
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準(zhǔn)（ICP備案）粵ICP備09006778號 域名注冊商資質(zhì) 粵 D3.1-20240008
