欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

學(xué)習(xí) Vue.js 遇到的那些坑

 更新時間:2021年02月02日 11:12:16   作者:shenlan  
這篇文章主要介紹了學(xué)習(xí) Vue.js 遇到的那些坑,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下

排名不分先后

最近好像都是只發(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ā)里,還會遇到更多問題。
例如頁面之間的刷新,等等等等。

所以很快就會有下一章的。

希望能幫到你。

以上就是學(xué)習(xí) Vue.js 遇到的那些坑的詳細內(nèi)容,更多關(guān)于學(xué)習(xí) Vue.js 遇到的坑的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Vue實現(xiàn)簡單基礎(chǔ)的圖片裁剪功能

    Vue實現(xiàn)簡單基礎(chǔ)的圖片裁剪功能

    這篇文章主要為大家詳細介紹了如何利用Vue2實現(xiàn)簡單基礎(chǔ)的圖片裁剪功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起了解一下
    2022-09-09
  • vue3封裝放大鏡組件的實例代碼

    vue3封裝放大鏡組件的實例代碼

    這篇文章主要給大家介紹了關(guān)于vue3封裝放大鏡組件的相關(guān)資料,封裝之后,使用起來就更簡單了,一個組件一行就可以,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2021-09-09
  • Vue項目路由刷新的實現(xiàn)代碼

    Vue項目路由刷新的實現(xiàn)代碼

    這篇文章主要介紹了Vue項目路由刷新的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • vue 權(quán)限認證token的實現(xiàn)方法

    vue 權(quán)限認證token的實現(xiàn)方法

    這篇文章主要介紹了vue 權(quán)限認證token的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • Vue3如何通過ESLint校驗代碼是否符合規(guī)范詳解

    Vue3如何通過ESLint校驗代碼是否符合規(guī)范詳解

    ESLint可以靈活設(shè)置規(guī)則,也發(fā)布了很多公開的規(guī)則集,下面這篇文章主要給大家介紹了關(guān)于Vue3如何通過ESLint校驗代碼是否符合規(guī)范的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • Vue.js 加入高德地圖的實現(xiàn)代碼

    Vue.js 加入高德地圖的實現(xiàn)代碼

    這篇文章主要介紹了Vue.js 加入高德地圖的實現(xiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • vite.config.js配置入門詳解

    vite.config.js配置入門詳解

    本文主要介紹了vite.config.js配置入門詳解,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • vue使用tracking實現(xiàn)人臉識別/人臉偵測完整代碼

    vue使用tracking實現(xiàn)人臉識別/人臉偵測完整代碼

    作為一個AI模型,人臉識別涉及到多個技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實現(xiàn)人臉識別/人臉偵測的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-09-09
  • vue中使用elementUI組件手動上傳圖片功能

    vue中使用elementUI組件手動上傳圖片功能

    Vue是一套構(gòu)建用戶界面的框架, 開發(fā)只需要關(guān)注視圖層, 它不僅易于上手,還便于與第三方庫或既有項目的整合。這篇文章主要介紹了vue中使用elementUI組件手動上傳圖片,需要的朋友可以參考下
    2019-12-12
  • vue頁面跳轉(zhuǎn)實現(xiàn)頁面緩存操作

    vue頁面跳轉(zhuǎn)實現(xiàn)頁面緩存操作

    這篇文章主要介紹了vue頁面跳轉(zhuǎn)實現(xiàn)頁面緩存操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07

最新評論